Fix start-debug to watch ts files

build/post-ts-build.js

@@ -4,36 +4,16 @@ import child_process from 'child_process';
 
 let args = process.argv.slice(2);
 let outputBaseDir = args[0];
-let minify = args[1];
 
-console.log(`Copying glsl files to ${outputBaseDir}, minify: ${minify}`);
-
-/**
- * This script is intended to copy the glsl file to the compilation output folder,
- * change their extension to .js and export the shaders as strings in javascript.
- * It will also minify them a bit if needed and change the extension to .js
- * After that it will create a combined typescript definition file and manipulate it a bit
- * It will also create a simple package.json file to allow importing this package in webpack
- */
+console.log(`Copying glsl files to ${outputBaseDir}`);
 
 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 fileName = outputBaseDir + '/' + file.split('/').splice(-1) + ".js";
+        const content = fs.readFileSync(file);
+        const fileName = outputBaseDir + '/' + file.split('/').splice(-1);
         fs.writeFileSync(fileName, content);
     }
-    console.log(`Finished converting ${files.length} glsl files`);
+    console.log(`Finished copying ${files.length} glsl files`);
 });
 
 if (!fs.existsSync("dist")) {
@@ -48,4 +28,4 @@ types = types.replace(/declare class/g, "export declare class");
 fs.writeFileSync(outputFile, types);
 console.log(`Finished bundling types`);
 
-fs.writeFileSync("./dist/package.json", '{ "type": "commonjs" }');
+fs.writeFileSync("./dist/package.json", '{ "type": "commonjs" }');

build/rollup_plugins.js

@@ -1,17 +1,18 @@
-
+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';
 
 // 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 +27,50 @@ 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: ['**/*.[jt]s'],
+    }) : 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;
+
+            // barebones GLSL minification
+            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 {
+                code: `export default ${JSON.stringify(code)};`,
+                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",
@@ -174,13 +176,11 @@
   },
   "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-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-prod-min": "npm run build-tsc && rollup -c --environment BUILD:production,MINIFY:true",
     "build-csp": "rollup -c rollup.config.csp.js",
     "build-query-suite": "rollup -c test/integration/rollup.config.test.js",
     "build-css": "postcss -o dist/maplibre-gl.css src/css/maplibre-gl.css",

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

@@ -23,8 +23,7 @@
       "WebWorker"
     ],
     "types": ["node", "jest", "geojson", "offscreencanvas"],
-    "outDir": "rollup/build/tsc",
-    "declarationDir": "types",
+    "declarationDir": "rollup/build/maplibregl",
     "declarationMap": true
   },
   "include": [