Enable demo and lib to build with parcel and webpack

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

View File

@ -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
cd web/web && npm install && npm run webgl-production-build
web-install PROJECT:
cd web/{{PROJECT}} && npm install
webpack-production: nightly-toolchain
cd web/web && npm install && npm run production-build
web-library TARGET: nightly-toolchain (web-install "lib")
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

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)

View File

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

View File

@ -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",
"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"
"build-production": "webpack --mode=production"
},
"repository": {
"type": "git",

View File

@ -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/' },
{ from: "*.maplibre-rs.js", to: "[path][name][ext]", context: 'node_modules/maplibre_rs/dist/maplibre-rs/' },
// webpack
//{ 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',
}),

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
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 } }

View File

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

8087
web/lib/package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -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",
"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/",
"production-build": "RUSTUP_TOOLCHAIN=nightly-2022-04-04-x86_64-unknown-linux-gnu webpack --mode=production",
"webgl-build": "npm run build -- --env webgl",
"webgl-production-build": "npm run production-build -- --env webgl"
"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",
"tsc-transpile": "npm run clean && npm run wasm-pack && tsc -m es2022 -outDir ./dist/maplibre-rs-esm",
"clean": "rm -rf dist && rm -rf src/wasm-pack",
"parcel": "npm run clean && npm run wasm-pack && export WEBGL=false && parcel build --no-cache src/index.ts",
"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",
"main": "dist/maplibre-rs/maplibre-rs.js",
"types": "src/index.ts",
"repository": {
"type": "git",
"url": "https://github.com/maplibre/maplibre-rs"
"module": "dist/parcel-esm/module.js",
"main": "dist/parcel-cjs/main.js",
"types": "dist/parcel/types.d.ts",
"targets": {
"main": {
"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",
"workbox-cacheable-response": "^6.4.2",
"workbox-routing": "^6.4.2",
"workbox-strategies": "^6.4.2"
"wasm-feature-detect": "^1.2.11"
},
"devDependencies": {
"@babel/cli": "^7.17.6",
"@babel/core": "^7.17.9",
"@babel/plugin-syntax-import-meta": "^7.10.4",
"@babel/preset-typescript": "^7.16.7",
"@magic-works/commonjs-import.meta": "^1.0.1",
"@parcel/optimizer-blob-url": "^2.5.0",
"@parcel/packager-ts": "^2.5.0",
"@parcel/transformer-inline": "^2.5.0",
"@parcel/transformer-typescript-types": "^2.5.0",
"@wasm-tool/wasm-pack-plugin": "^1.6.0",
"babel-plugin-transform-import-meta": "^2.1.1",
"ts-loader": "^9.2.6",
"parcel": "^2.5.0",
"ts-loader": "^9.2.8",
"typescript": "^4.5.4",
"wasm-pack": "^0.10.2",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.6.0"
"webpack-cli": "^4.9.1"
},
"repository": {
"type": "git",
"url": "https://github.com/maplibre/maplibre-rs"
},
"keywords": [
"wasm",

View File

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

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;

View File

@ -15,12 +15,7 @@ import {
threads
} from "wasm-feature-detect"
declare global {
interface Window {
schedule_tile_request: (url: string, request_id: number) => void;
newWorker: () => void;
}
}
const WEBGL = JSON.parse(process.env.WEBGL)
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 worker = new Worker(new URL('./worker.ts', import.meta.url), {
const createWorker = (id: number, memory: WebAssembly.Memory) => {
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'
});
})

View File

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

View File

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

View File

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

View File

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

View File

@ -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, '../'),