archive-gh-me/maplibre-rs
1
0
Fork 0
mirror of https://github.com/maplibre/maplibre-rs.git synced 2025-12-08 19:05:57 +00:00
Code Issues Projects Releases Wiki Activity

Enable demo and lib to build with parcel and webpack

Browse Source
This commit is contained in:
Maximilian Ammann 2022-04-25 19:24:12 +02:00
parent 6e01e48e32
commit a7f87f635e
22 changed files with 3992 additions and 4421 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
justfile
View File

@ -31,50 +31,25 @@ default-toolchain:
nightly-toolchain: nightly-toolchain:
rustup install $NIGHTLY_TOOLCHAIN rustup install $NIGHTLY_TOOLCHAIN
rustup component add rust-src --toolchain $NIGHTLY_TOOLCHAIN rustup component add rust-src --toolchain $NIGHTLY_TOOLCHAIN
rustup override set $NIGHTLY_TOOLCHAIN
nightly-toolchain-android: nightly-toolchain nightly-toolchain-android: nightly-toolchain
rustup target add --toolchain $NIGHTLY_TOOLCHAIN x86_64-linux-android rustup target add --toolchain $NIGHTLY_TOOLCHAIN x86_64-linux-android
rustup target add --toolchain $NIGHTLY_TOOLCHAIN aarch64-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: #profile-bench:
# cargo flamegraph --bench render -- --bench # cargo flamegraph --bench render -- --bench
build-android: print-android-env build-android: print-android-env
cd android/gradle && ./gradlew assembleDebug export RUSTUP_TOOLCHAIN=$NIGHTLY_TOOLCHAIN && cd android/gradle && ./gradlew assembleDebug
# language=bash # language=bash
print-android-env: 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" echo "$framework_args" | xargs xcodebuild -create-xcframework -output "$XC_FRAMEWORK_PATH"
cat "$XC_FRAMEWORK_PATH/Info.plist" cat "$XC_FRAMEWORK_PATH/Info.plist"
book-serve:
mdbook serve docs
# language=bash # language=bash
extract-tiles: extract-tiles:
#!/usr/bin/env bash #!/usr/bin/env bash

12
web/demo/index.ts
View File

@ -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)

44
web/demo/package-lock.json generated
View File

@ -30,28 +30,21 @@
"version": "0.0.1", "version": "0.0.1",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"babel-plugin-bundled-import-meta": "^0.3.2",
"spectorjs": "^0.9.27", "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": { "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", "@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", "typescript": "^4.5.4",
"wasm-pack": "^0.10.2", "wasm-pack": "^0.10.2",
"webpack": "^5.65.0", "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": { "node_modules/@discoveryjs/json-ext": {
@ -5856,26 +5849,19 @@
"maplibre_rs": { "maplibre_rs": {
"version": "file:../lib", "version": "file:../lib",
"requires": { "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", "@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", "spectorjs": "^0.9.27",
"ts-loader": "^9.2.6", "ts-loader": "^9.2.8",
"ttypescript": "^1.5.13",
"typescript": "^4.5.4", "typescript": "^4.5.4",
"wasm-feature-detect": "^1.2.11", "wasm-feature-detect": "^1.2.11",
"wasm-pack": "^0.10.2", "wasm-pack": "^0.10.2",
"webpack": "^5.65.0", "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": { "media-typer": {

7
web/demo/package.json
View File

@ -5,12 +5,9 @@
"private": true, "private": true,
"scripts": { "scripts": {
"start": "webpack-dev-server --mode=development", "start": "webpack-dev-server --mode=development",
"start-production": "npm run start -- --mode=production",
"build": "webpack --mode=development", "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": { "repository": {
"type": "git", "type": "git",

20
web/demo/webpack.config.js
View File

@ -1,16 +1,15 @@
const path = require("path"); const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require("copy-webpack-plugin"); const CopyPlugin = require("copy-webpack-plugin");
let dist = path.join(__dirname, 'dist/'); let dist = path.join(__dirname, 'dist/');
module.exports = (env) => ({ module.exports = (_env) => ({
mode: "development", mode: "development",
entry: { entry: {
main: "./index.ts", main: "./index.ts",
}, },
experiments: { experiments: {
//syncWebAssembly: true asyncWebAssembly: true
}, },
performance: { performance: {
maxEntrypointSize: 400000, maxEntrypointSize: 400000,
@ -37,25 +36,26 @@ module.exports = (env) => ({
module: { module: {
rules: [ rules: [
{ {
test: /\.tsx?$/, test: /\.ts$/,
use: 'ts-loader', use: 'ts-loader',
exclude: /node_modules/, exclude: /node_modules/,
}, },
], ],
}, },
resolve: { resolve: {
extensions: ['.tsx', '.ts', '.js'], extensions: ['.ts', '.js'],
}, },
plugins: [ plugins: [
new CopyPlugin({ new CopyPlugin({
patterns: [ 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({ new HtmlWebpackPlugin({
title: 'maplibre demo', title: 'maplibre demo',
}), }),

4
web/lib/.babelrc
View File

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

2
web/lib/.gitignore vendored
View File

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

3
web/lib/.parcelrc Normal file
View File

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

1
web/lib/@types/bundler/index.d.ts vendored Normal file
View File

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

4
web/lib/@types/wasm_bindgen/index.d.ts vendored Normal file
View File

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

8093
web/lib/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

67
web/lib/package.json
View File

@ -3,42 +3,57 @@
"version": "0.0.1", "version": "0.0.1",
"description": "", "description": "",
"scripts": { "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": { "dependencies": {
"babel-plugin-bundled-import-meta": "^0.3.2",
"spectorjs": "^0.9.27", "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": { "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", "@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", "typescript": "^4.5.4",
"wasm-pack": "^0.10.2", "wasm-pack": "^0.10.2",
"webpack": "^5.65.0", "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": [ "keywords": [
"wasm", "wasm",

8
web/lib/src/decl.d.ts vendored
View File

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

9
web/lib/src/index.d.ts vendored
View File

@ -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;

50
web/lib/src/index.ts
View File

@ -15,12 +15,7 @@ import {
threads threads
} from "wasm-feature-detect" } 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 = () => { const isWebGLSupported = () => {
try { try {
@ -73,8 +68,6 @@ const checkRequirements = () => {
return false return false
} }
let WEBGL = true
if (WEBGL) { if (WEBGL) {
if (!isWebGLSupported()) { if (!isWebGLSupported()) {
alertUser("WebGL is not supported in this Browser!") alertUser("WebGL is not supported in this Browser!")
@ -100,32 +93,21 @@ const preventDefaultTouchActions = () => {
canvas.addEventListener("touchmove", e => e.preventDefault()) canvas.addEventListener("touchmove", e => e.preventDefault())
}) })
} }
/*
const registerServiceWorker = () => { let WORKER_COUNT = 4
if ('serviceWorker' in navigator) { const createWorker = (id: number, memory: WebAssembly.Memory) => {
window.addEventListener('load', () => { const worker = new Worker(new URL('./legacy_worker.ts', import.meta.url), {
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 worker = new Worker(new URL('./worker.ts', import.meta.url), {
type: "module", type: "module",
name: `worker_${id}`
}) })
worker.postMessage({type: "init", memory} as WebWorkerMessageType) worker.postMessage({type: "init", memory} as WebWorkerMessageType)
return worker return worker
} }
const setupLegacyWebWorker = (schedulerPtr: number, memory: WebAssembly.Memory) => {
let workers: [number, Worker][] = Array.from( let workers: [number, Worker][] = Array.from(
new Array(WORKER_COUNT).keys(), 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) => { window.schedule_tile_request = (url: string, request_id: number) => {
@ -137,25 +119,29 @@ const setupLegacyWebWorker = (schedulerPtr: number, memory: WebAssembly.Memory)
request_id request_id
} as WebWorkerMessageType) } as WebWorkerMessageType)
} }
} }*/
export const startMapLibre = async () => { export const startMapLibre = async (wasmPath: string | undefined, workerPath: string | undefined) => {
await checkWasmFeatures() await checkWasmFeatures()
if (!checkRequirements()) { if (!checkRequirements()) {
return return
} }
registerServiceWorker()
preventDefaultTouchActions(); preventDefaultTouchActions();
let MEMORY_PAGES = 16 * 1024 let MEMORY_PAGES = 16 * 1024
const memory = new WebAssembly.Memory({initial: 1024, maximum: MEMORY_PAGES, shared: true}) 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(() => { 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' type: 'module'
}); });
}) })

0
web/lib/src/worker.ts → web/lib/src/legacy_worker.ts
View File

1
web/lib/src/pool_worker.d.ts vendored
View File

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

0
web/lib/src/service-worker.d.ts vendored
View File

9
web/lib/src/types.d.ts vendored
View File

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

1
web/lib/src/worker.d.ts vendored
View File

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

2
web/lib/tsconfig.json
View File

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

10
web/lib/webpack.config.js
View File

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