Fix start-debug to watch ts files

build/glsl_to_js.js

@@ -0,0 +1,12 @@
+export default function glsl_to_js(code, minify) {
+    if (minify) {
+        code = code.trim() // strip whitespace at the start/end
+            .replace(/\s*\/\/[^\n]*\n/g, '\n') // strip double-slash comments
+            .replace(/\n+/g, '\n') // collapse multi line breaks
+            .replace(/\n\s+/g, '\n') // strip identation
+            .replace(/\s?([+-\/*=,])\s?/g, '$1') // strip whitespace around operators
+            .replace(/([;\(\),\{\}])\n(?=[^#])/g, '$1'); // strip more line breaks
+
+    }
+    return `export default ${JSON.stringify(code)};`;
+}

build/post-ts-build.js

@@ -1,6 +1,7 @@
 import fs from 'fs';
 import glob from 'glob';
 import child_process from 'child_process';
+import glsl_to_js from './glsl_to_js.js';
 
 let args = process.argv.slice(2);
 let outputBaseDir = args[0];
@@ -19,17 +20,7 @@ console.log(`Copying glsl files to ${outputBaseDir}, minify: ${minify}`);
 glob("./src/**/*.glsl", null, (err, files) => {
     for (let file of files) {
         let code = fs.readFileSync(file, 'utf8');
-
-        if (minify) {
-            code = code.trim() // strip whitespace at the start/end
-                .replace(/\s*\/\/[^\n]*\n/g, '\n') // strip double-slash comments
-                .replace(/\n+/g, '\n') // collapse multi line breaks
-                .replace(/\n\s+/g, '\n') // strip identation
-                .replace(/\s?([+-\/*=,])\s?/g, '$1') // strip whitespace around operators
-                .replace(/([;\(\),\{\}])\n(?=[^#])/g, '$1'); // strip more line breaks
-
-        }
-        let content = `export default ${JSON.stringify(code)};`
+        let content = glsl_to_js(code, minify);
         let fileName = outputBaseDir + '/' + file.split('/').splice(-1) + ".js";
         fs.writeFileSync(fileName, content);
     }

build/rollup_plugins.js

@@ -1,17 +1,20 @@
 
+import typescript from '@rollup/plugin-typescript';
 import resolve from '@rollup/plugin-node-resolve';
 import replace from '@rollup/plugin-replace';
 import commonjs from '@rollup/plugin-commonjs';
 import unassert from 'rollup-plugin-unassert';
 import json from '@rollup/plugin-json';
 import {terser} from 'rollup-plugin-terser';
 import minifyStyleSpec from './rollup_plugin_minify_style_spec.js';
+import {createFilter} from 'rollup-pluginutils';
 import strip from '@rollup/plugin-strip';
+import glsl_to_js from './glsl_to_js.js';
 
 // Common set of plugins/transformations shared across different rollup
 // builds (main maplibre bundle, style-spec package, benchmarks bundle)
 
-export const plugins = (minified, production) => [
+export const plugins = (minified, production, watch) => [
     minifyStyleSpec(),
     json(),
     // https://github.com/zaach/jison/issues/351
@@ -26,20 +29,39 @@ export const plugins = (minified, production) => [
         sourceMap: true,
         functions: ['PerformanceUtils.*', 'Debug.*']
     }) : false,
+    glsl('**/*.glsl', production),
     minified ? terser({
         compress: {
             pure_getters: true,
             passes: 3
         }
     }) : false,
-    production ? unassert() : false,
+    production ? unassert({
+        include: ['**/*'], // by default, unassert only includes .js files
+    }) : false,
     resolve({
         browser: true,
         preferBuiltins: false
     }),
+    watch ? typescript() : false,
     commonjs({
         // global keyword handling causes Webpack compatibility issues, so we disabled it:
         // https://github.com/mapbox/mapbox-gl-js/pull/6956
         ignoreGlobal: true
     })
 ].filter(Boolean);
+
+// Using this instead of rollup-plugin-string to add minification
+function glsl(include, minify) {
+    const filter = createFilter(include);
+    return {
+        name: 'glsl',
+        transform(code, id) {
+            if (!filter(id)) return;
+            return {
+                code: glsl_to_js(code, minify),
+                map: {mappings: ''}
+            };
+        }
+    };
+}

package.json

@@ -46,6 +46,7 @@
     "@rollup/plugin-node-resolve": "^13.0.6",
     "@rollup/plugin-replace": "^3.0.0",
     "@rollup/plugin-strip": "^2.1.0",
+    "@rollup/plugin-typescript": "^8.3.0",
     "@types/babel__core": "^7.1.12",
     "@types/babelify": "^7.3.6",
     "@types/benchmark": "^2.1.0",
@@ -151,6 +152,7 @@
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-unassert": "^0.3.0",
+    "rollup-pluginutils": "^2.8.2",
     "rw": "^1.3.3",
     "selenium-webdriver": "^4.0.0-rc-1",
     "semver": "^7.3.5",
@@ -175,10 +177,10 @@
   "scripts": {
     "build-post-ts": "node build/post-ts-build.js ./rollup/build/tsc/src/shaders",
     "build-post-ts-min": "node build/post-ts-build.js ./rollup/build/tsc/src/shaders true",
-    "build-tsc": "tsc && npm run build-post-ts",
-    "build-tsc-min": "tsc && npm run build-post-ts-min",
+    "build-tsc": "tsc --outDir rollup/build/tsc && npm run build-post-ts",
+    "build-tsc-min": "tsc --outDir rollup/build/tsc && npm run build-post-ts-min",
     "build-dev": "npm run build-tsc && rollup -c --environment BUILD:dev",
-    "watch-dev": "npm run build-tsc && rollup -c --environment BUILD:dev --watch",
+    "watch-dev": "rollup -c --environment BUILD:dev --watch",
     "build-prod": "npm run build-tsc && rollup -c --environment BUILD:production",
     "build-prod-min": "npm run build-tsc-min && rollup -c --environment BUILD:production,MINIFY:true",
     "build-csp": "rollup -c rollup.config.csp.js",

rollup.config.js

@@ -3,23 +3,25 @@ import sourcemaps from 'rollup-plugin-sourcemaps';
 import {plugins} from './build/rollup_plugins.js';
 import banner from './build/banner.js';
 
-const {BUILD, MINIFY} = process.env;
+const {BUILD, MINIFY, ROLLUP_WATCH} = process.env;
 const minified = MINIFY === 'true';
+const watch = ROLLUP_WATCH === 'true';
+const srcDir = watch ? 'src' : 'rollup/build/tsc/src';
+const inputExt = watch ? 'ts' : 'js';
 const production = BUILD === 'production';
 const outputFile =
     !production ? 'dist/maplibre-gl-dev.js' :
     minified ? 'dist/maplibre-gl.js' : 'dist/maplibre-gl-unminified.js';
 
 export default [{
-    // Before rollup you should run build-tsc to transpile from typescript to javascript
-    // and to copy the shaders and convert them to js strings
+    // Before rollup you should run build-tsc to transpile from typescript to javascript (except when running rollup in watch mode)
     // Rollup will use code splitting to bundle GL JS into three "chunks":
     // - rollup/build/maplibregl/index.js: the main module, plus all its dependencies not shared by the worker module
     // - rollup/build/maplibregl/worker.js: the worker module, plus all dependencies not shared by the main module
     // - rollup/build/maplibregl/shared.js: the set of modules that are dependencies of both the main module and the worker module
     //
     // This is also where we do all of our source transformations using the plugins.
-    input: ['rollup/build/tsc/src/index.js', 'rollup/build/tsc/src/source/worker.js'],
+    input: [`${srcDir}/index.${inputExt}`, `${srcDir}/source/worker.${inputExt}`],
     output: {
         dir: 'rollup/build/maplibregl',
         format: 'amd',
@@ -28,7 +30,7 @@ export default [{
         chunkFileNames: 'shared.js'
     },
     treeshake: production,
-    plugins: plugins(minified, production)
+    plugins: plugins(minified, production, watch)
 }, {
     // Next, bundle together the three "chunks" produced in the previous pass
     // into a single, final bundle. See rollup/bundle_prelude.js and

tsconfig.json

@@ -3,7 +3,6 @@
     "allowJs": false,
     "allowSyntheticDefaultImports": true,
     "checkJs": false,
-    "declaration": true,
     "esModuleInterop": true,
     "importHelpers": false,
     "isolatedModules": true,
@@ -22,10 +21,7 @@
       "DOM.Iterable",
       "WebWorker"
     ],
-    "types": ["node", "jest", "geojson", "offscreencanvas"],
-    "outDir": "rollup/build/tsc",
-    "declarationDir": "types",
-    "declarationMap": true
+    "types": ["node", "jest", "geojson", "offscreencanvas"]
   },
   "include": [
     "src/**/*.ts",