Enable demo and lib to build with parcel and webpack

justfile

@@ -31,50 +31,25 @@ default-toolchain:
 nightly-toolchain:
   rustup install $NIGHTLY_TOOLCHAIN
   rustup component add rust-src --toolchain $NIGHTLY_TOOLCHAIN
-  rustup override set $NIGHTLY_TOOLCHAIN
 
 nightly-toolchain-android: nightly-toolchain
   rustup target add --toolchain $NIGHTLY_TOOLCHAIN x86_64-linux-android
   rustup target add --toolchain $NIGHTLY_TOOLCHAIN aarch64-linux-android
 
-webpack-webgl-production: nightly-toolchain
+web-install PROJECT:
-  cd web/web && npm install && npm run webgl-production-build
+  cd web/{{PROJECT}} && npm install
 
-webpack-production: nightly-toolchain
+web-library TARGET: nightly-toolchain (web-install "lib")
-  cd web/web && npm install && npm run production-build
+  export RUSTUP_TOOLCHAIN=$NIGHTLY_TOOLCHAIN && cd web/lib && npm run {{TARGET}}
+
+web-demo TARGET: (web-install "demo")
+  cd web/demo && npm run {{TARGET}}
 
-# TODO
-wasm-pack-webgl: nightly-toolchain
-   ./wasm-pack-v0.10.1-x86_64-unknown-linux-musl/wasm-pack build . \
-     --release --target web --out-dir web/dist/maplibre-rs -- \
-     --features "web-webgl" -Z build-std=std,panic_abort
-#
-# wasm-pack: nightly-toolchain
-#   ./wasm-pack-v0.10.1-x86_64-unknown-linux-musl/wasm-pack build . \
-#     --release --target web --out-dir web/dist/maplibre-rs -- \
-#     -Z build-std=std,panic_abort
-#
-# build-web-webgl: nightly-toolchain
-#   cargo build --features web-webgl --target wasm32-unknown-unknown -Z build-std=std,panic_abort
-#
-# build-web: nightly-toolchain
-#   cargo build --features "" --target wasm32-unknown-unknown -Z build-std=std,panic_abort
-#
-# wasm-bindgen:
-#   cargo install wasm-bindgen-cli
-#   # TODO: Untested: --reference-types
-#   wasm-bindgen --target web --out-dir web/dist/maplibre-rs-plain-bindgen target/wasm32-unknown-unknown/debug/maplibre.wasm
-#
-# build-wasm-bindgen: build-web wasm-bindgen
-#
-# build-wasm-bindgen-webgpu: build-web wasm-bindgen
-# TODO
 #profile-bench:
 # cargo flamegraph --bench render -- --bench
 
-
 build-android: print-android-env
-  cd android/gradle && ./gradlew assembleDebug
+  export RUSTUP_TOOLCHAIN=$NIGHTLY_TOOLCHAIN && cd android/gradle && ./gradlew assembleDebug
 
 # language=bash
 print-android-env:
@@ -136,6 +111,9 @@ xcodebuild-xcframework: xcodebuild-clean (xcodebuild-archive  "arm64" "iOS") (xc
   echo "$framework_args" | xargs xcodebuild -create-xcframework -output "$XC_FRAMEWORK_PATH"
   cat "$XC_FRAMEWORK_PATH/Info.plist"
 
+book-serve:
+  mdbook serve docs
+
 # language=bash
 extract-tiles:
   #!/usr/bin/env bash

web/demo/index.ts

@@ -1,5 +1,11 @@
-import test, { startMapLibre } from 'maplibre_rs'
+import { startMapLibre } from 'maplibre_rs'
+// @ts-ignore
+//import maplibreWasm from 'maplibre_rs/dist/parcel-cjs/index_bg.900705f4.wasm'
+// @ts-ignore
+//import maplibreWorker from 'maplibre_rs/dist/parcel-cjs/pool_worker.584c4c50'
 
-console.log(test)
 
-startMapLibre()
+// cjs
+//startMapLibre("./maplibre.wasm", "./worker.js")
+// esm
+startMapLibre(undefined, undefined)

web/demo/package-lock.json

@@ -30,28 +30,21 @@
       "version": "0.0.1",
       "license": "MIT",
       "dependencies": {
-        "babel-plugin-bundled-import-meta": "^0.3.2",
         "spectorjs": "^0.9.27",
-        "ttypescript": "^1.5.13",
+        "wasm-feature-detect": "^1.2.11"
-        "wasm-feature-detect": "^1.2.11",
-        "workbox-cacheable-response": "^6.4.2",
-        "workbox-routing": "^6.4.2",
-        "workbox-strategies": "^6.4.2"
       },
       "devDependencies": {
-        "@babel/cli": "^7.17.6",
+        "@parcel/optimizer-blob-url": "^2.5.0",
-        "@babel/core": "^7.17.9",
+        "@parcel/packager-ts": "^2.5.0",
-        "@babel/plugin-syntax-import-meta": "^7.10.4",
+        "@parcel/transformer-inline": "^2.5.0",
-        "@babel/preset-typescript": "^7.16.7",
+        "@parcel/transformer-typescript-types": "^2.5.0",
-        "@magic-works/commonjs-import.meta": "^1.0.1",
         "@wasm-tool/wasm-pack-plugin": "^1.6.0",
-        "babel-plugin-transform-import-meta": "^2.1.1",
+        "parcel": "^2.5.0",
-        "ts-loader": "^9.2.6",
+        "ts-loader": "^9.2.8",
         "typescript": "^4.5.4",
         "wasm-pack": "^0.10.2",
         "webpack": "^5.65.0",
-        "webpack-cli": "^4.9.1",
+        "webpack-cli": "^4.9.1"
-        "webpack-dev-server": "^4.6.0"
       }
     },
     "node_modules/@discoveryjs/json-ext": {
@@ -5856,26 +5849,19 @@
     "maplibre_rs": {
       "version": "file:../lib",
       "requires": {
-        "@babel/cli": "^7.17.6",
+        "@parcel/optimizer-blob-url": "^2.5.0",
-        "@babel/core": "^7.17.9",
+        "@parcel/packager-ts": "^2.5.0",
-        "@babel/plugin-syntax-import-meta": "^7.10.4",
+        "@parcel/transformer-inline": "^2.5.0",
-        "@babel/preset-typescript": "^7.16.7",
+        "@parcel/transformer-typescript-types": "^2.5.0",
-        "@magic-works/commonjs-import.meta": "^1.0.1",
         "@wasm-tool/wasm-pack-plugin": "^1.6.0",
-        "babel-plugin-bundled-import-meta": "^0.3.2",
+        "parcel": "^2.5.0",
-        "babel-plugin-transform-import-meta": "^2.1.1",
         "spectorjs": "^0.9.27",
-        "ts-loader": "^9.2.6",
+        "ts-loader": "^9.2.8",
-        "ttypescript": "^1.5.13",
         "typescript": "^4.5.4",
         "wasm-feature-detect": "^1.2.11",
         "wasm-pack": "^0.10.2",
         "webpack": "^5.65.0",
-        "webpack-cli": "^4.9.1",
+        "webpack-cli": "^4.9.1"
-        "webpack-dev-server": "^4.6.0",
-        "workbox-cacheable-response": "^6.4.2",
-        "workbox-routing": "^6.4.2",
-        "workbox-strategies": "^6.4.2"
       }
     },
     "media-typer": {

web/demo/package.json

@@ -5,12 +5,9 @@
   "private": true,
   "scripts": {
     "start": "webpack-dev-server --mode=development",
+    "start-production": "npm run start -- --mode=production",
     "build": "webpack --mode=development",
-    "production-build": "webpack --mode=production",
+    "build-production": "webpack --mode=production"
-    "webgl-start": "npm run start -- --env webgl",
-    "webgl-start-production": "npm run webgl-start -- --mode=production",
-    "webgl-build": "npm run build -- --env webgl",
-    "webgl-production-build": "npm run production-build -- --env webgl"
   },
   "repository": {
     "type": "git",

web/demo/webpack.config.js

@@ -1,16 +1,15 @@
 const path = require("path");
-const webpack = require("webpack");
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyPlugin = require("copy-webpack-plugin");
 
 let dist = path.join(__dirname, 'dist/');
-module.exports = (env) => ({
+module.exports = (_env) => ({
     mode: "development",
     entry: {
         main: "./index.ts",
     },
     experiments: {
-        //syncWebAssembly: true
+        asyncWebAssembly: true
     },
     performance: {
         maxEntrypointSize: 400000,
@@ -37,25 +36,26 @@ module.exports = (env) => ({
     module: {
         rules: [
             {
-                test: /\.tsx?$/,
+                test: /\.ts$/,
                 use: 'ts-loader',
                 exclude: /node_modules/,
             },
         ],
     },
     resolve: {
-        extensions: ['.tsx', '.ts', '.js'],
+        extensions: ['.ts', '.js'],
     },
     plugins: [
         new CopyPlugin({
             patterns: [
-                { from: "*.wasm", to: "[path][name][ext]", context: 'node_modules/maplibre_rs/dist/maplibre-rs/' },
+                // webpack
-                { from: "*.maplibre-rs.js", to: "[path][name][ext]", context: 'node_modules/maplibre_rs/dist/maplibre-rs/' },
+                //{ from: "*.wasm", to: "[path][name][ext]", context: 'node_modules/maplibre_rs/dist/maplibre-rs/' },
+                //{ from: "*.maplibre-rs.js", to: "[path][name][ext]", context: 'node_modules/maplibre_rs/dist/maplibre-rs/' },
+                // parcel
+                {from: "*.wasm", to: "[path]maplibre[ext]", context: 'node_modules/maplibre_rs/dist/parcel-cjs/'},
+                {from: "*worker*", to: "[path]worker[ext]", context: 'node_modules/maplibre_rs/dist/parcel-cjs/'},
             ],
         }),
-        new webpack.DefinePlugin({
-            WEBGL: !!env.webgl
-        }),
         new HtmlWebpackPlugin({
             title: 'maplibre demo',
         }),

web/lib/.babelrc

@@ -1,4 +0,0 @@
-{
-  "presets": ["@babel/preset-typescript"],
-  "plugins": []
-}

web/lib/.gitignore

@@ -5,3 +5,5 @@ libs/maplibre*
 dist
 
 src/wasm-pack
+
+.parcel-cache

web/lib/.parcelrc

@@ -0,0 +1,3 @@
+{
+  "extends": "@parcel/config-default"
+}

web/lib/@types/bundler/index.d.ts

@@ -0,0 +1 @@
+declare const process: { env: { WEBGL: string } }

web/lib/@types/wasm_bindgen/index.d.ts

@@ -0,0 +1,4 @@
+interface Window {
+    schedule_tile_request: (url: string, request_id: number) => void;
+    newWorker: () => void;
+}

web/lib/package.json

@@ -3,42 +3,57 @@
   "version": "0.0.1",
   "description": "",
   "scripts": {
-    "build": "RUSTUP_TOOLCHAIN=nightly-2022-04-04-x86_64-unknown-linux-gnu webpack --mode=development",
+    "wasm-pack": "wasm-pack build --out-name index --out-dir lib/src/wasm-pack ../ --target web -- --features \"$FEATURES\" -Z build-std=std,panic_abort && rm src/wasm-pack/package.json",
-    "build-esm": "export RUSTUP_TOOLCHAIN=nightly-2022-04-04-x86_64-unknown-linux-gnu && rm -rf ./dist/maplibre-rs-esm && wasm-pack build --out-name index --out-dir lib/src/wasm-pack ../ --target web -- --features web-webgl -Z build-std=std,panic_abort && tsc -m es2022 -outDir ./dist/maplibre-rs-esm && cp src/wasm-pack/index_bg.wasm dist/maplibre-rs-esm/wasm-pack/",
+    "tsc-transpile": "npm run clean && npm run wasm-pack && tsc -m es2022 -outDir ./dist/maplibre-rs-esm",
-    "production-build": "RUSTUP_TOOLCHAIN=nightly-2022-04-04-x86_64-unknown-linux-gnu webpack --mode=production",
+    "clean": "rm -rf dist && rm -rf src/wasm-pack",
-    "webgl-build": "npm run build -- --env webgl",
+    "parcel": "npm run clean && npm run wasm-pack && export WEBGL=false && parcel build --no-cache src/index.ts",
-    "webgl-production-build": "npm run production-build -- --env webgl"
+    "parcel-webgl": "npm run clean && FEATURES=web-webgl npm run wasm-pack && export WEBGL=true && parcel build --no-cache src/index.ts",
+    "webpack": "webpack --mode=development",
+    "webpack-webgl": "npm run build -- --env webgl",
+    "webpack-production": "webpack --mode=production",
+    "webpack-webgl-production": "npm run production-build -- --env webgl"
   },
-  "ignmodule": "dist/maplibre-rs-esm/index.js",
+  "module": "dist/parcel-esm/module.js",
-  "main": "dist/maplibre-rs/maplibre-rs.js",
+  "main": "dist/parcel-cjs/main.js",
-  "types": "src/index.ts",
+  "types": "dist/parcel/types.d.ts",
-  "repository": {
+  "targets": {
-    "type": "git",
+    "main": {
-    "url": "https://github.com/maplibre/maplibre-rs"
+      "distDir": "./dist/parcel-cjs",
+      "context": "browser",
+      "outputFormat": "commonjs"
+    },
+    "module": {
+      "distDir": "./dist/parcel-esm",
+      "context": "browser",
+      "outputFormat": "esmodule"
+    }
+  },
+  "@parcel/transformer-js": {
+    "inlineFS": false,
+    "inlineEnvironment": [
+      "WEBGL"
+    ]
   },
   "dependencies": {
-    "babel-plugin-bundled-import-meta": "^0.3.2",
     "spectorjs": "^0.9.27",
-    "ttypescript": "^1.5.13",
+    "wasm-feature-detect": "^1.2.11"
-    "wasm-feature-detect": "^1.2.11",
-    "workbox-cacheable-response": "^6.4.2",
-    "workbox-routing": "^6.4.2",
-    "workbox-strategies": "^6.4.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.17.6",
+    "@parcel/optimizer-blob-url": "^2.5.0",
-    "@babel/core": "^7.17.9",
+    "@parcel/packager-ts": "^2.5.0",
-    "@babel/plugin-syntax-import-meta": "^7.10.4",
+    "@parcel/transformer-inline": "^2.5.0",
-    "@babel/preset-typescript": "^7.16.7",
+    "@parcel/transformer-typescript-types": "^2.5.0",
-    "@magic-works/commonjs-import.meta": "^1.0.1",
     "@wasm-tool/wasm-pack-plugin": "^1.6.0",
-    "babel-plugin-transform-import-meta": "^2.1.1",
+    "parcel": "^2.5.0",
-    "ts-loader": "^9.2.6",
+    "ts-loader": "^9.2.8",
     "typescript": "^4.5.4",
     "wasm-pack": "^0.10.2",
     "webpack": "^5.65.0",
-    "webpack-cli": "^4.9.1",
+    "webpack-cli": "^4.9.1"
-    "webpack-dev-server": "^4.6.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/maplibre/maplibre-rs"
   },
   "keywords": [
     "wasm",

web/lib/src/decl.d.ts

@@ -1,8 +0,0 @@
-declare module "spectorjs" {
-    class Spector {
-
-        displayUI(): void;
-    }
-}
-
-declare var WEBGL: boolean;

web/lib/src/index.d.ts

@@ -1,9 +0,0 @@
-declare global {
-    interface Window {
-        schedule_tile_request: (url: string, request_id: number) => void;
-        newWorker: () => void;
-    }
-}
-export declare const startMapLibre: () => Promise<void>;
-declare const _default: "test";
-export default _default;

web/lib/src/index.ts

@@ -15,12 +15,7 @@ import {
     threads
 } from "wasm-feature-detect"
 
-declare global {
+const WEBGL = JSON.parse(process.env.WEBGL)
-    interface Window {
-        schedule_tile_request: (url: string, request_id: number) => void;
-        newWorker: () => void;
-    }
-}
 
 const isWebGLSupported = () => {
     try {
@@ -73,8 +68,6 @@ const checkRequirements = () => {
         return false
     }
 
-    let WEBGL = true
-
     if (WEBGL) {
         if (!isWebGLSupported()) {
             alertUser("WebGL is not supported in this Browser!")
@@ -100,32 +93,21 @@ const preventDefaultTouchActions = () => {
         canvas.addEventListener("touchmove", e => e.preventDefault())
     })
 }
-
+/*
-const registerServiceWorker = () => {
-    if ('serviceWorker' in navigator) {
-        window.addEventListener('load', () => {
-            navigator.serviceWorker.register(new URL('./service-worker.ts', import.meta.url)).catch(() => {
-                console.error("Failed to register service worker");
-            })
-        })
-    }
-}
-
-const setupLegacyWebWorker = (schedulerPtr: number, memory: WebAssembly.Memory) => {
 let WORKER_COUNT = 4
-    const createWorker = (id: number) => {
+const createWorker = (id: number, memory: WebAssembly.Memory) => {
-        const worker = new Worker(new URL('./worker.ts', import.meta.url), {
+    const worker = new Worker(new URL('./legacy_worker.ts', import.meta.url), {
         type: "module",
-            name: `worker_${id}`
     })
     worker.postMessage({type: "init", memory} as WebWorkerMessageType)
 
     return worker
 }
 
+const setupLegacyWebWorker = (schedulerPtr: number, memory: WebAssembly.Memory) => {
     let workers: [number, Worker][] = Array.from(
         new Array(WORKER_COUNT).keys(),
-        (id) => [new_thread_local_state(schedulerPtr), createWorker(id)]
+        (id) => [new_thread_local_state(schedulerPtr), createWorker(id, memory)]
     )
 
     window.schedule_tile_request = (url: string, request_id: number) => {
@@ -137,25 +119,29 @@ const setupLegacyWebWorker = (schedulerPtr: number, memory: WebAssembly.Memory)
             request_id
         } as WebWorkerMessageType)
     }
-}
+}*/
 
-export const startMapLibre = async () => {
+export const startMapLibre = async (wasmPath: string | undefined, workerPath: string | undefined) => {
     await checkWasmFeatures()
 
     if (!checkRequirements()) {
         return
     }
 
-    registerServiceWorker()
-
     preventDefaultTouchActions();
 
     let MEMORY_PAGES = 16 * 1024
 
     const memory = new WebAssembly.Memory({initial: 1024, maximum: MEMORY_PAGES, shared: true})
-    await init(undefined, memory)
+    await init(wasmPath, memory)
+
+    // TODO: Inline is not yet working
+    // let worker = new Worker(new URL('blob-url:./test_worker.js', import.meta.url), {type: 'module'});
+
     const schedulerPtr = create_pool_scheduler(() => {
-        return new Worker(new URL('./pool_worker.ts', import.meta.url), {
+        return workerPath ? new Worker(workerPath, {
+            type: 'module'
+        }) : new Worker(new URL("./pool_worker.ts", import.meta.url), {
             type: 'module'
         });
     })

web/lib/src/pool_worker.d.ts

@@ -1 +0,0 @@
-export {};

web/lib/src/types.d.ts

@@ -1,9 +0,0 @@
-export declare type WebWorkerMessageType = {
-    type: 'init';
-    memory: WebAssembly.Memory;
-} | {
-    type: 'fetch_tile';
-    threadLocalState: number;
-    url: string;
-    request_id: number;
-};

web/lib/src/worker.d.ts

@@ -1 +0,0 @@
-export {};

web/lib/tsconfig.json

@@ -9,6 +9,8 @@
     "allowJs": true,
     "skipLibCheck": true,
     "moduleResolution": "node",
+    "types": ["wasm_bindgen", "bundler"],
+    "typeRoots": ["@types"]
   },
   "include": ["./src/**/*"]
 }

web/lib/webpack.config.js

@@ -19,21 +19,17 @@ module.exports = (env) => ({
         library: {
             name: 'maplibre_rs',
             type: 'umd',
-
         },
-
-        umdNamedDefine: true
     },
     module: {
         rules: [
             {
-                test: /\.tsx?$/,
+                test: /\.ts$/,
                 exclude: /node_modules/,
                 use: [
                     {
                         loader: 'ts-loader',
                         options: {
-                            "transpileOnly": true
                         }
                     }
                 ]
@@ -41,11 +37,11 @@ module.exports = (env) => ({
         ],
     },
     resolve: {
-        extensions: ['.tsx', '.ts', '.js'],
+        extensions: ['.ts', '.js'],
     },
     plugins: [
         new webpack.DefinePlugin({
-            WEBGL: !!env.webgl
+            'process.env.WEBGL': !!env.webgl
         }),
         new WasmPackPlugin({
             crateDirectory: path.resolve(__dirname, '../'),