ts examples + vue

mappable-world · Mar 6, 2024 · 0cbf7e6 · 0cbf7e6
1 parent 3215e92
commit 0cbf7e6
Show file tree

Hide file tree

Showing 12 changed files with 242 additions and 2 deletions.
diff --git a/template/example/common.ts b/template/example/common.ts
@@ -0,0 +1,22 @@
+import type {MMapLocationRequest, LngLatBounds} from '@mappable-world/mappable-types';
+
+mappable.import.loaders.unshift(async (pkg) => {
+    if (!pkg.startsWith('%PACKAGE_NAME%')) {
+        return;
+    }
+
+    if (location.href.includes('localhost')) {
+        await mappable.import.script(`/dist/index.js`);
+    } else {
+        await mappable.import.script(`https://unpkg.com/${pkg}/dist/index.js`);
+    }
+
+    return window['%PACKAGE_NAME%'];
+});
+
+const BOUNDS: LngLatBounds = [
+    [54.58311, 25.9985],
+    [56.30248, 24.47889]
+];
+
+export const LOCATION: MMapLocationRequest = {bounds: BOUNDS};
diff --git a/template/example/index.html b/template/example/index.html
@@ -11,7 +11,7 @@
         <link rel="stylesheet" href="./common.css" />
     </head>
     <body>
-        <iframe width="100%" height="500px" src="./vanilla.html" frameborder="0"></iframe>
+        <iframe width="100%" height="500px" src="./vanilla/index.html" frameborder="0"></iframe>
         <div class="content">
             <div class="version">%VERSION%</div>
             %README%

diff --git a/template/example/react/index.html b/template/example/react/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>React example %PACKAGE_NAME%</title>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
+        <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
+        <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
+        <script crossorigin src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
+        <script src="https://js.api.mappable.world/3.0/?apikey=%APIKEY%&lang=en_US"></script>
+
+        <script
+            data-plugins="transform-modules-umd"
+            data-presets="react, typescript"
+            type="text/babel"
+            src="../common.ts"
+        ></script>
+        <script
+            data-plugins="transform-modules-umd"
+            data-presets="react, typescript"
+            type="text/babel"
+            src="./index.tsx"
+        ></script>
+
+        <link rel="stylesheet" href="../common.css" />
+    </head>
+    <body>
+        <div id="app"></div>
+    </body>
+</html>
diff --git a/template/example/react/index.tsx b/template/example/react/index.tsx
@@ -0,0 +1,40 @@
+import {LOCATION} from '../common';
+
+window.map = null;
+
+main();
+async function main() {
+    const [mappableReact] = await Promise.all([mappable.import('@mappable-world/mappable-reactify'), mappable.ready]);
+    const reactify = mappableReact.reactify.bindTo(React, ReactDOM);
+
+    const {MMap, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapControls} = reactify.module(mappable);
+
+    const {useState, useCallback} = React;
+
+    const {MMapZoomControl} = reactify.module(await mappable.import('@mappable-world/mappable-controls@0.0.1'));
+
+    const {MMapButtonExample} = reactify.module(await mappable.import('%PACKAGE_NAME%'));
+
+    ReactDOM.render(
+        <React.StrictMode>
+            <App />
+        </React.StrictMode>,
+        document.getElementById('app')
+    );
+
+    function App() {
+        const [location, setLocation] = useState(LOCATION);
+        const onClick = useCallback(() => alert('Click!'), []);
+
+        return (
+            <MMap location={location} ref={(x) => (map = x)}>
+                <MMapDefaultSchemeLayer />
+                <MMapDefaultFeaturesLayer />
+                <MMapControls position="right">
+                    <MMapZoomControl />
+                    <MMapButtonExample text={'My button'} onClick={onClick} />
+                </MMapControls>
+            </MMap>
+        );
+    }
+}
diff --git a/template/example/tsconfig.json b/template/example/tsconfig.json
@@ -0,0 +1,10 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "strict": false,
+        "rootDir": "",
+        "rootDirs": ["./", "../"],
+        "types": ["./types.d.ts"]
+    },
+    "include": ["./**/*.ts", "./**/*.tsx"]
+}
diff --git a/template/example/types.d.ts b/template/example/types.d.ts
@@ -0,0 +1,14 @@
+import {MMap} from '@mappable-world/mappable-types';
+
+declare global {
+    const React: typeof import('react');
+    const ReactDOM: typeof import('react-dom');
+    const Vue: typeof import('@vue/runtime-dom');
+    let map: MMap;
+
+    interface Window {
+        map: MMap;
+    }
+}
+
+export {};
diff --git a/template/example/vanilla/index.html b/template/example/vanilla/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Vanilla example %PACKAGE_NAME%</title>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
+        <script crossorigin src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
+        <script src="https://js.api.mappable.world/3.0/?apikey=%APIKEY%&lang=en_US"></script>
+
+        <script
+            data-plugins="transform-modules-umd"
+            data-presets="typescript"
+            type="text/babel"
+            src="../common.ts"
+        ></script>
+        <script
+            data-plugins="transform-modules-umd"
+            data-presets="typescript"
+            type="text/babel"
+            src="./index.ts"
+        ></script>
+
+        <link rel="stylesheet" href="../common.css" />
+    </head>
+    <body>
+        <div id="app"></div>
+    </body>
+</html>
diff --git a/template/example/vanilla/index.ts b/template/example/vanilla/index.ts
@@ -0,0 +1,22 @@
+import {LOCATION} from '../common';
+window.map = null;
+
+main();
+async function main() {
+    await mappable.ready;
+    const {MMap, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapControls} = mappable;
+
+    const {MMapZoomControl} = await mappable.import('@mappable-world/mappable-controls@0.0.1');
+    const {MMapButtonExample} = await mappable.import('%PACKAGE_NAME%');
+
+    map = new MMap(document.getElementById('app'), {location: LOCATION});
+
+    map.addChild(new MMapDefaultSchemeLayer({}));
+    map.addChild(new MMapDefaultFeaturesLayer({}));
+
+    map.addChild(
+        new MMapControls({position: 'right'})
+            .addChild(new MMapZoomControl({}))
+            .addChild(new MMapButtonExample({text: 'My button', onClick: () => alert('Click!')}))
+    );
+}
diff --git a/template/example/vue/index.html b/template/example/vue/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Vue example %PACKAGE_NAME%</title>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
+        <script crossorigin src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+        <script crossorigin src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
+        <script src="https://js.api.mappable.world/3.0/?apikey=%APIKEY%&lang=en_US"></script>
+
+        <script
+            data-plugins="transform-modules-umd"
+            data-presets="typescript"
+            type="text/babel"
+            src="../common.ts"
+        ></script>
+        <script
+            data-plugins="transform-modules-umd"
+            data-presets="typescript"
+            type="text/babel"
+            src="./index.ts"
+        ></script>
+
+        <link rel="stylesheet" href="../common.css" />
+    </head>
+    <body>
+        <div id="app"></div>
+    </body>
+</html>
diff --git a/template/example/vue/index.ts b/template/example/vue/index.ts
@@ -0,0 +1,43 @@
+import {LOCATION} from '../common';
+
+window.map = null;
+
+main();
+async function main() {
+    const [mappableVue] = await Promise.all([mappable.import('@mappable-world/mappable-vuefy'), mappable.ready]);
+    const vuefy = mappableVue.vuefy.bindTo(Vue);
+
+    const {MMap, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapControls} = vuefy.module(mappable);
+
+    const {MMapZoomControl} = vuefy.module(await mappable.import('@mappable-world/mappable-controls@0.0.1'));
+
+    const {MMapButtonExample} = vuefy.module(await mappable.import('%PACKAGE_NAME%'));
+
+    const app = Vue.createApp({
+        components: {
+            MMap,
+            MMapDefaultSchemeLayer,
+            MMapDefaultFeaturesLayer,
+            MMapControls,
+            MMapZoomControl,
+            MMapButtonExample
+        },
+        setup() {
+            const refMap = (ref) => {
+                window.map = ref?.entity;
+            };
+            const onClick = () => alert('Click!');
+            return {LOCATION, refMap, onClick};
+        },
+        template: `
+            <MMap :location="LOCATION" :ref="refMap">
+                <MMapDefaultSchemeLayer />
+                <MMapDefaultFeaturesLayer />
+                <MMapControls position="right">
+                    <MMapZoomControl />
+                    <MMapButtonExample text="My button" :onClick="onClick" />
+                </MMapControls>
+            </MMap>`
+    });
+    app.mount('#app');
+}
diff --git a/template/t_tpackage.json b/template/t_tpackage.json
@@ -44,6 +44,7 @@
         "ts-jest": "29.1.1",
         "ts-loader": "9.4.4",
         "typescript": "5.1.6",
+        "vue": "^3.4.21",
         "webpack": "5.88.1",
         "webpack-cli": "5.1.4",
         "webpack-dev-server": "4.15.1"

diff --git a/template/t_ttsconfig.json b/template/t_ttsconfig.json
@@ -1,7 +1,8 @@
 {
     "extends": ["@mappable-world/mappable-cli"],
     "compilerOptions": {
+        "lib": ["dom", "dom.iterable", "esnext"],
         "typeRoots": ["./node_modules/@types", "./node_modules/@mappable-world"]
     },
-    "include": ["./src",  "./node_modules/@mappable-world/mappable-cli/index.d.ts"]
+    "include": ["./src", "./node_modules/@mappable-world/mappable-cli/index.d.ts"]
 }