[add] svelte framework all demos. [update] fix all demos lib declare …

…deps to devDeps.
onsummer · May 27, 2021 · a60ecfb · a60ecfb
1 parent a6f02b2
commit a60ecfb
Show file tree

Hide file tree

Showing 75 changed files with 3,639 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -1,8 +1,8 @@
 # 1 简介
 
-使用 `vite2` 创建 React17 & Vue3 项目。
+使用 `Vite2` 创建 `React17`、`Vue3`、`Svelte` 项目。
 
-每个前端框架提供下列类 gis 库的 `Hello World` 代码。
+每个前端框架提供下列 gis 或类 gis 库的 `Hello World` 代码。
 
 - [email protected]
 - [email protected]
@@ -50,7 +50,7 @@ window['CESIUM_BASE_URL'] = `path/to/cesium/Source/`
 
 # 2 Future
 
-- 使用 svelte 试写一次
+- 使用原生 js+css+html 试写一次
 
 
 

diff --git a/react-ts-cesium181/package.json b/react-ts-cesium181/package.json
@@ -7,12 +7,12 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "@types/cesium": "^1.67.13",
     "cesium": "^1.81.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },
   "devDependencies": {
+    "@types/cesium": "^1.67.13",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@vitejs/plugin-react-refresh": "^1.3.1",

diff --git a/react-ts-leaflet/package.json b/react-ts-leaflet/package.json
@@ -7,12 +7,12 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "@types/leaflet": "^1.7.0",
     "leaflet": "^1.7.1",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },
   "devDependencies": {
+    "@types/leaflet": "^1.7.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@vitejs/plugin-react-refresh": "^1.3.1",

diff --git a/react-ts-mapboxgl/package.json b/react-ts-mapboxgl/package.json
@@ -7,12 +7,12 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "@types/mapbox-gl": "1.13.0",
     "mapbox-gl": "1.13.1",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },
   "devDependencies": {
+    "@types/mapbox-gl": "1.13",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@vitejs/plugin-react-refresh": "^1.3.1",

diff --git a/react-ts-mapboxgl/yarn.lock b/react-ts-mapboxgl/yarn.lock
@@ -264,13 +264,13 @@
 
 "@types/geojson@*":
   version "7946.0.7"
-  resolved "https://registry.nlark.com/@types/geojson/download/@types/geojson-7946.0.7.tgz?cache=0&sync_timestamp=1621241246852&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Fgeojson%2Fdownload%2F%40types%2Fgeojson-7946.0.7.tgz#c8fa532b60a0042219cdf173ca21a975ef0666ad"
+  resolved "https://registry.nlark.com/@types/geojson/download/@types/geojson-7946.0.7.tgz#c8fa532b60a0042219cdf173ca21a975ef0666ad"
   integrity sha1-yPpTK2CgBCIZzfFzyiGpde8GZq0=
 
-"@types/[email protected].0":
-  version "1.13.0"
-  resolved "https://registry.nlark.com/@types/mapbox-gl/download/@types/mapbox-gl-1.13.0.tgz?cache=0&sync_timestamp=1621241937883&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Fmapbox-gl%2Fdownload%2F%40types%2Fmapbox-gl-1.13.0.tgz#914836d0ea5d1a433252c8debeef75d410c3d062"
-  integrity sha1-kUg20OpdGkMyUsjevu911BDD0GI=
+"@types/[email protected]":
+  version "1.13.1"
+  resolved "https://registry.nlark.com/@types/mapbox-gl/download/@types/mapbox-gl-1.13.1.tgz?cache=0&sync_timestamp=1621241797834&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Fmapbox-gl%2Fdownload%2F%40types%2Fmapbox-gl-1.13.1.tgz#bd8108f912f32c895117e2970b6d4fbbecbe42a1"
+  integrity sha1-vYEI+RLzLIlRF+KXC21Pu+y+QqE=
   dependencies:
     "@types/geojson" "*"
 

diff --git a/react-ts-ol6/package.json b/react-ts-ol6/package.json
@@ -7,12 +7,12 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "@types/ol": "^6.5.0",
     "ol": "^6.5.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },
   "devDependencies": {
+    "@types/ol": "^6.5.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@vitejs/plugin-react-refresh": "^1.3.1",

diff --git a/svelte-js-@arcgiscore/.gitignore b/svelte-js-@arcgiscore/.gitignore
@@ -0,0 +1,4 @@
+/node_modules/
+/dist/
+/.vscode/
+.DS_Store
diff --git a/svelte-js-@arcgiscore/index.html b/svelte-js-@arcgiscore/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="zh">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title> ArcGIS jsAPI4 with Svelte Js </title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/svelte-js-@arcgiscore/jsconfig.json b/svelte-js-@arcgiscore/jsconfig.json
@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "target": "esnext",
+    "module": "esnext",
+    /**
+     * svelte-preprocess cannot figure out whether you have
+     * a value or a type, so tell TypeScript to enforce using
+     * `import type` instead of `import` for Types.
+     */
+    "importsNotUsedAsValues": "error",
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    /**
+     * To have warnings / errors of the Svelte compiler at the
+     * correct position, enable source maps by default.
+     */
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable this if you'd like to use dynamic types.
+     */
+    "checkJs": true
+  },
+  /**
+   * Use global.d.ts instead of compilerOptions.types
+   * to avoid limiting type declarations.
+   */
+  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
+}
diff --git a/svelte-js-@arcgiscore/package.json b/svelte-js-@arcgiscore/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "svelte-js-arcgiscore4",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.7",
+    "rollup-plugin-copy": "^3.4.0",
+    "svelte": "^3.37.0",
+    "vite": "^2.3.4"
+  },
+  "dependencies": {
+    "@arcgis/core": "^4.19.3"
+  }
+}
diff --git a/svelte-js-@arcgiscore/src/App.svelte b/svelte-js-@arcgiscore/src/App.svelte
@@ -0,0 +1,32 @@
+<script>
+  import { onMount } from "svelte";
+  import Map from "@arcgis/core/Map";
+  import MapView from "@arcgis/core/views/MapView";
+  import "@arcgis/core/assets/esri/themes/dark/main.css";
+
+  let viewDiv;
+  let map, view;
+  onMount(() => {
+    map = new Map({
+      basemap: "topo-vector",
+    });
+
+    view = new MapView({
+      container: viewDiv,
+      map: map,
+      center: [112.5, 22.3],
+      zoom: 7,
+    });
+  });
+</script>
+
+<main>
+  <div id="viewDiv" bind:this={viewDiv} />
+</main>
+
+<style>
+  #viewDiv {
+    width: 100vw;
+    height: 100vh;
+  }
+</style>
diff --git a/svelte-js-@arcgiscore/src/main.css b/svelte-js-@arcgiscore/src/main.css
@@ -0,0 +1,9 @@
+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+#app {
+  height: 100vh;
+  width: 100vw;
+}
diff --git a/svelte-js-@arcgiscore/src/main.js b/svelte-js-@arcgiscore/src/main.js
@@ -0,0 +1,8 @@
+import App from './App.svelte'
+import "./main.css"
+
+const app = new App({
+  target: document.getElementById('app')
+})
+
+export default app
diff --git a/svelte-js-@arcgiscore/src/vite-env.d.ts b/svelte-js-@arcgiscore/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
diff --git a/svelte-js-@arcgiscore/vite.config.js b/svelte-js-@arcgiscore/vite.config.js
@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import svelte from '@sveltejs/vite-plugin-svelte'
+import copy from 'rollup-plugin-copy'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    svelte(),
+    copy({
+      targets: [
+        { src: "node_modules/@arcgis/core/assets", dest: "public" }
+      ],
+      hook: 'writeBundle'
+    })
+  ]
+})