ashatora/editor
1
0
Fork 0
mirror of https://github.com/maputnik/editor.git synced 2025-12-31 10:30:00 +00:00
Code Issues Projects Releases Wiki Activity

Vite + TypeScript (#836)

Browse Source 
Resolves #803

This is an initial commit to allow migrating to typescript bit by bit.
It introduces vite.
It removes all the webpack configuration (which I have no clue what all
the profiling are needed for, and couldn't find anything in the readme).
It also changes a single file from javascript to typescript:
`urlopen.js` -> `urlopen.ts`
Which was done manually, later on I'll see if I can automate most of the
migration.
For now, everything seems to work as expected.
I also upgrades storybook to use vite and renames the stories to jsx (I
honestly don't know why this complexity is needed here, but I'll keep it
for now).

cc: @damianstasik
This commit is contained in:
Harel M
2023-12-18 05:52:19 +02:00
committed by GitHub
parent 17eaa3f204
commit ad69cbdb20
70 changed files with 6111 additions and 32230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/AppToolbar.jsx
View File

@@ -4,9 +4,6 @@ import classnames from 'classnames'
import {detect} from 'detect-browser';
import {MdFileDownload, MdOpenInBrowser, MdSettings, MdLayers, MdHelpOutline, MdFindInPage, MdAssignmentTurnedIn} from 'react-icons/md'
import logoImage from 'maputnik-design/logos/logo-color.svg'
import pkgJson from '../../package.json'
@@ -217,7 +214,7 @@ export default class AppToolbar extends React.Component {
rel="noreferrer noopener"
href="https://github.com/maputnik/editor"
>
<span dangerouslySetInnerHTML={{__html: logoImage}} />
<img src="node_modules/maputnik-design/logos/logo-color.svg" />
<h1>
<span className="maputnik-toolbar-name">{pkgJson.name}</span>
<span className="maputnik-toolbar-version">v{pkgJson.version}</span>

3
src/components/MapOpenLayers.jsx
View File

@@ -1,13 +1,12 @@
import React from 'react'
import {throttle} from 'lodash';
import PropTypes from 'prop-types'
import { loadJSON } from '../libs/urlopen'
import MapMaplibreGlLayerPopup from './MapMaplibreGlLayerPopup';
import 'ol/ol.css'
import {apply} from 'ol-mapbox-style';
import {Map, View, Proj, Overlay} from 'ol';
import {Map, View, Overlay} from 'ol';
import {toLonLat} from 'ol/proj';
import {toStringHDMS} from 'ol/coordinate';

4
src/components/Modal.jsx
View File

@@ -27,9 +27,9 @@ export default class Modal extends React.Component {
document.activeElement.blur();
}
setImmediate(() => {
setTimeout(() => {
this.props.onOpenToggle(false);
});
}, 0);
}
render() {

8
src/components/ModalExport.jsx
View File

@@ -1,12 +1,10 @@
import React from 'react'
import PropTypes from 'prop-types'
import Slugify from 'slugify'
import { saveAs } from 'file-saver'
import pkgLockJson from '../../package-lock.json'
import {saveAs} from 'file-saver'
import {version} from 'maplibre-gl'
import {format} from '@maplibre/maplibre-gl-style-spec'
import FieldString from './FieldString'
import FieldCheckbox from './FieldCheckbox'
import InputButton from './InputButton'
import Modal from './Modal'
import {MdFileDownload} from 'react-icons/md'
@@ -14,7 +12,7 @@ import style from '../libs/style'
import fieldSpecAdditional from '../libs/field-spec-additional'
const MAPLIBRE_GL_VERSION = pkgLockJson.dependencies["maplibre-gl"].version;
const MAPLIBRE_GL_VERSION = version;
export default class ModalExport extends React.Component {

1
src/components/SpecField.jsx
View File

@@ -8,7 +8,6 @@ import Fieldset from './Fieldset'
const typeMap = {
color: () => Block,
enum: ({fieldSpec}) => (Object.keys(fieldSpec.values).length <= 3 ? Fieldset : Block),
number: () => Block,
boolean: () => Block,
array: () => Fieldset,
resolvedImage: () => Block,

10
src/libs/maplibre-rtl.js
View File

@@ -1,11 +1,3 @@
import MapLibreGl from "maplibre-gl"
import {readFileSync} from 'fs'
const data = readFileSync(__dirname+"/../../node_modules/@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.js", "utf8");
const blob = new window.Blob([data], {
type: "text/javascript"
});
const objectUrl = window.URL.createObjectURL(blob);
MapLibreGl.setRTLTextPlugin(objectUrl, () => {});
MapLibreGl.setRTLTextPlugin('https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.min.js');

65
src/libs/urlopen.js
View File

@@ -1,65 +0,0 @@
import url from 'url'
import querystring from 'querystring'
import style from './style.js'
export function initialStyleUrl() {
const initialUrl = url.parse(window.location.href, true)
return (initialUrl.query || {}).style
}
export function loadStyleUrl(styleUrl, cb) {
console.log('Loading style', styleUrl)
fetch(styleUrl, {
mode: 'cors',
credentials: "same-origin"
})
.then(function(response) {
return response.json();
})
.then(function(body) {
cb(style.ensureStyleValidity(body))
})
.catch(function() {
console.warn('Could not fetch default style', styleUrl)
cb(style.emptyStyle)
})
}
export function removeStyleQuerystring() {
const initialUrl = url.parse(window.location.href, true)
let qs = querystring.parse(window.location.search.slice(1))
delete qs["style"]
if(Object.getOwnPropertyNames(qs).length === 0) {
qs = ""
} else {
qs = "?" + querystring.stringify(qs)
}
let newUrlHash = initialUrl.hash
if(newUrlHash === null) {
newUrlHash = ""
}
const newUrl = initialUrl.protocol + "//" + initialUrl.host + initialUrl.pathname + qs + newUrlHash
window.history.replaceState({}, document.title, newUrl)
}
export function loadJSON(url, defaultValue, cb) {
fetch(url, {
mode: 'cors',
credentials: "same-origin"
})
.then(function(response) {
return response.json();
})
.then(function(body) {
try {
cb(body)
} catch(err) {
console.error(err)
cb(defaultValue)
}
})
.catch(function() {
console.error('Can not load JSON from ' + url)
cb(defaultValue)
})
}

31
src/libs/urlopen.ts Normal file
View File

@@ -0,0 +1,31 @@
// @ts-ignore
import style from './style'
export function initialStyleUrl() {
const initialUrl = new URL(window.location.href);
return initialUrl.searchParams.get('style');
}
export function loadStyleUrl(styleUrl: string, cb: (...args: any[]) => void) {
console.log('Loading style', styleUrl)
fetch(styleUrl, {
mode: 'cors',
credentials: "same-origin"
})
.then(function(response) {
return response.json();
})
.then(function(body) {
cb(style.ensureStyleValidity(body))
})
.catch(function() {
console.warn('Could not fetch default style', styleUrl)
cb(style.emptyStyle)
})
}
export function removeStyleQuerystring() {
const initialUrl = new URL(window.location.href);
initialUrl.searchParams.delete('style');
window.history.replaceState({}, document.title, initialUrl.toString())
}

2
src/styles/_toolbar.scss
View File

@@ -30,7 +30,7 @@
line-height: 26px;
}
svg {
img {
width: 30px;
padding-right: $margin-2;
vertical-align: top;

132
src/template.html
View File

@@ -1,132 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><%= htmlWebpackPlugin.options.title %></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="manifest.json">
<style>
html {
background-color: rgb(28, 31, 36);
}
.loading {
text-align: center;
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.loading__logo svg {
width: 200px;
height: 200px;
}
.loading__text {
font-family: sans-serif;
color: white;
font-size: 1.2em;
padding-bottom: 2em;
}
</style>
</head>
<body>
<!-- TODO: Import dynamically -->
<!-- From <https://github.com/hail2u/color-blindness-emulation> -->
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
version="1.1">
<defs>
<filter id="protanopia">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.567, 0.433, 0, 0, 0
0.558, 0.442, 0, 0, 0
0, 0.242, 0.758, 0, 0
0, 0, 0, 1, 0"/>
</filter>
<filter id="protanomaly">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.817, 0.183, 0, 0, 0
0.333, 0.667, 0, 0, 0
0, 0.125, 0.875, 0, 0
0, 0, 0, 1, 0"/>
</filter>
<filter id="deuteranopia">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.625, 0.375, 0, 0, 0
0.7, 0.3, 0, 0, 0
0, 0.3, 0.7, 0, 0
0, 0, 0, 1, 0"/>
</filter>
<filter id="deuteranomaly">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.8, 0.2, 0, 0, 0
0.258, 0.742, 0, 0, 0
0, 0.142, 0.858, 0, 0
0, 0, 0, 1, 0"/>
</filter>
<filter id="tritanopia">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.95, 0.05, 0, 0, 0
0, 0.433, 0.567, 0, 0
0, 0.475, 0.525, 0, 0
0, 0, 0, 1, 0"/>
</filter>
<filter id="tritanomaly">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.967, 0.033, 0, 0, 0
0, 0.733, 0.267, 0, 0
0, 0.183, 0.817, 0, 0
0, 0, 0, 1, 0"/>
</filter>
<filter id="achromatopsia">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.299, 0.587, 0.114, 0, 0
0.299, 0.587, 0.114, 0, 0
0.299, 0.587, 0.114, 0, 0
0, 0, 0, 1, 0"/>
</filter>
<filter id="achromatomaly">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.618, 0.320, 0.062, 0, 0
0.163, 0.775, 0.062, 0, 0
0.163, 0.320, 0.516, 0, 0
0, 0, 0, 1, 0"/>
</filter>
</defs>
</svg>
<div id="app"></div>
<div class="loading">
<div class="loading__logo">
<!-- replaced by 'html-webpack-inline-svg-plugin' -->
<img inline src="node_modules/maputnik-design/logos/logo-loading.svg" />
</div>
<div class="loading__text">Loading&hellip;</div>
</div>
</body>
</html>