build(examples): switch all examples to new snowpack setup

examples/adaptive-threshold/.gitignore

@@ -1,5 +1,6 @@
-.cache
-out
+build
+dev
 node_modules
 yarn.lock
-*.js
+!snowpack.config.js
+!*.d.ts

examples/adaptive-threshold/package.json

@@ -6,15 +6,9 @@
     "author": "Karsten Schmidt <[email protected]>",
     "license": "Apache-2.0",
     "scripts": {
-        "clean": "rm -rf .cache build out",
-        "build": "yarn clean && parcel build index.html -d out --public-url ./ --no-source-maps --no-cache --detailed-report --experimental-scope-hoisting",
-        "build:webpack": "../../node_modules/.bin/webpack --mode production",
-        "start": "parcel index.html -p 8080 --open --no-cache"
-    },
-    "devDependencies": {
-        "parcel-bundler": "^1.12.4",
-        "terser": "^5.2.1",
-        "typescript": "^4.1.2"
+        "clean": "../../node_modules/.bin/rimraf build node_modules/.cache",
+        "start": "../../node_modules/.bin/snowpack dev",
+        "build": "../../node_modules/.bin/snowpack build"
     },
     "dependencies": {
         "@thi.ng/api": "latest",
@@ -39,5 +33,8 @@
             "transducers-hdom"
         ],
         "screenshot": "examples/adaptive-threshold.png"
+    },
+    "devDependencies": {
+        "@types/snowpack-env": "^2.3.2"
     }
 }

examples/adaptive-threshold/index.html → examples/adaptive-threshold/public/index.html

@@ -26,6 +26,6 @@
                 >Source code</a
             >
         </div>
-        <script type="text/javascript" src="./src/index.ts"></script>
+        <script type="module" src="/_dist_/index.js"></script>
     </body>
 </html>

examples/adaptive-threshold/snowpack.config.js

@@ -0,0 +1,29 @@
+/** @type {import("snowpack").SnowpackUserConfig } */
+module.exports = {
+    mount: {
+        public: "/",
+        src: "/_dist_",
+    },
+    plugins: [
+        "@snowpack/plugin-typescript",
+        [
+            "@snowpack/plugin-webpack",
+            {
+                extendConfig: (config) => {
+                    config.node = {
+                        process: false,
+                        setImmediate: false,
+                        util: "empty",
+                    };
+                    return config;
+                },
+            },
+        ],
+    ],
+    installOptions: {
+        installTypes: true,
+    },
+    buildOptions: {
+        baseUrl: "/adaptive-threshold",
+    },
+};

examples/adaptive-threshold/src/api.ts

@@ -1,5 +1,5 @@
 import type { Val1 } from "@thi.ng/api";
-import { PackedBuffer } from "@thi.ng/pixel";
+import type { PackedBuffer } from "@thi.ng/pixel";
 
 // event ID constants
 export const SET_IMAGE = "set-image";

examples/adaptive-threshold/src/index.ts

@@ -1,5 +1,5 @@
 import { peek } from "@thi.ng/arrays";
-import { PackedBuffer } from "@thi.ng/pixel";
+import type { PackedBuffer } from "@thi.ng/pixel";
 import { fromRAF, sidechainPartition } from "@thi.ng/rstream";
 import { map } from "@thi.ng/transducers";
 import { updateDOM } from "@thi.ng/transducers-hdom";

examples/adaptive-threshold/src/static.d.ts

@@ -0,0 +1,59 @@
+/* Use this file to declare any custom file extensions for importing */
+/* Use this folder to also add/extend a package d.ts file, if needed. */
+
+/* CSS MODULES */
+declare module "*.module.css" {
+    const classes: { [key: string]: string };
+    export default classes;
+}
+declare module "*.module.scss" {
+    const classes: { [key: string]: string };
+    export default classes;
+}
+declare module "*.module.sass" {
+    const classes: { [key: string]: string };
+    export default classes;
+}
+declare module "*.module.less" {
+    const classes: { [key: string]: string };
+    export default classes;
+}
+declare module "*.module.styl" {
+    const classes: { [key: string]: string };
+    export default classes;
+}
+
+/* CSS */
+declare module "*.css";
+declare module "*.scss";
+declare module "*.sass";
+declare module "*.less";
+declare module "*.styl";
+
+/* IMAGES */
+declare module "*.svg" {
+    const ref: string;
+    export default ref;
+}
+declare module "*.bmp" {
+    const ref: string;
+    export default ref;
+}
+declare module "*.gif" {
+    const ref: string;
+    export default ref;
+}
+declare module "*.jpg" {
+    const ref: string;
+    export default ref;
+}
+declare module "*.jpeg" {
+    const ref: string;
+    export default ref;
+}
+declare module "*.png" {
+    const ref: string;
+    export default ref;
+}
+
+/* CUSTOM: ADD YOUR OWN HERE */

examples/adaptive-threshold/tsconfig.json

@@ -1,9 +1,8 @@
 {
-    "extends": "../../tsconfig.json",
+    "extends": "../tsconfig.json",
+    "include": ["src"],
     "compilerOptions": {
-        "outDir": ".",
-        "target": "es2017",
-        "sourceMap": true
-    },
-    "include": ["./src/**/*.ts"]
+        "baseUrl": "./",
+        "paths": { "*": ["web_modules/.types/*"] }
+    }
 }

examples/async-effect/.gitignore

@@ -1,5 +1,6 @@
-.cache
-out
+build
+dev
 node_modules
 yarn.lock
-*.js
+!snowpack.config.js
+!*.d.ts

examples/async-effect/package.json

@@ -6,15 +6,9 @@
     "author": "Karsten Schmidt <[email protected]>",
     "license": "Apache-2.0",
     "scripts": {
-        "clean": "rm -rf .cache build out",
-        "prep": "yarn clean && mkdir -p out && cp foo.json out",
-        "build": "yarn prep && parcel build index.html -d out --no-source-maps --no-cache --experimental-scope-hoisting --detailed-report --public-url ./",
-        "start": "yarn prep && parcel index.html -p 8080 --open -d out"
-    },
-    "devDependencies": {
-        "parcel-bundler": "^1.12.4",
-        "terser": "^5.2.1",
-        "typescript": "^4.1.2"
+        "clean": "../../node_modules/.bin/rimraf build node_modules/.cache",
+        "start": "../../node_modules/.bin/snowpack dev",
+        "build": "../../node_modules/.bin/snowpack build"
     },
     "dependencies": {
         "@thi.ng/api": "latest",
@@ -31,5 +25,8 @@
         "readme": [
             "interceptors"
         ]
+    },
+    "devDependencies": {
+        "@types/snowpack-env": "^2.3.2"
     }
 }

examples/async-effect/index.html → examples/async-effect/public/index.html

@@ -44,6 +44,6 @@ <h1>async side effect handling</h1>
             >
         </p>
         <div id="app"></div>
-        <script type="text/javascript" src="./src/index.ts"></script>
+        <script type="module" src="/_dist_/index.js"></script>
     </body>
 </html>

examples/async-effect/snowpack.config.js

@@ -0,0 +1,29 @@
+/** @type {import("snowpack").SnowpackUserConfig } */
+module.exports = {
+    mount: {
+        public: "/",
+        src: "/_dist_",
+    },
+    plugins: [
+        "@snowpack/plugin-typescript",
+        [
+            "@snowpack/plugin-webpack",
+            {
+                extendConfig: (config) => {
+                    config.node = {
+                        process: false,
+                        setImmediate: false,
+                        util: "empty",
+                    };
+                    return config;
+                },
+            },
+        ],
+    ],
+    installOptions: {
+        installTypes: true,
+    },
+    buildOptions: {
+        baseUrl: "/async-effect",
+    },
+};

examples/async-effect/src/static.d.ts

@@ -0,0 +1,59 @@
+/* Use this file to declare any custom file extensions for importing */
+/* Use this folder to also add/extend a package d.ts file, if needed. */
+
+/* CSS MODULES */
+declare module "*.module.css" {
+    const classes: { [key: string]: string };
+    export default classes;
+}
+declare module "*.module.scss" {
+    const classes: { [key: string]: string };
+    export default classes;
+}
+declare module "*.module.sass" {
+    const classes: { [key: string]: string };
+    export default classes;
+}
+declare module "*.module.less" {
+    const classes: { [key: string]: string };
+    export default classes;
+}
+declare module "*.module.styl" {
+    const classes: { [key: string]: string };
+    export default classes;
+}
+
+/* CSS */
+declare module "*.css";
+declare module "*.scss";
+declare module "*.sass";
+declare module "*.less";
+declare module "*.styl";
+
+/* IMAGES */
+declare module "*.svg" {
+    const ref: string;
+    export default ref;
+}
+declare module "*.bmp" {
+    const ref: string;
+    export default ref;
+}
+declare module "*.gif" {
+    const ref: string;
+    export default ref;
+}
+declare module "*.jpg" {
+    const ref: string;
+    export default ref;
+}
+declare module "*.jpeg" {
+    const ref: string;
+    export default ref;
+}
+declare module "*.png" {
+    const ref: string;
+    export default ref;
+}
+
+/* CUSTOM: ADD YOUR OWN HERE */

examples/async-effect/tsconfig.json

@@ -1,10 +1,8 @@
 {
-    "extends": "../../tsconfig.json",
+    "extends": "../tsconfig.json",
+    "include": ["src"],
     "compilerOptions": {
-        "outDir": ".",
-        "module": "es2020",
-        "target": "es2017",
-        "sourceMap": true
-    },
-    "include": ["./src/**/*.ts"]
+        "baseUrl": "./",
+        "paths": { "*": ["web_modules/.types/*"] }
+    }
 }

examples/bitmap-font/.gitignore

@@ -1,5 +1,6 @@
-.cache
-out
+build
+dev
 node_modules
 yarn.lock
-*.js
+!snowpack.config.js
+!*.d.ts

examples/bitmap-font/package.json

@@ -6,16 +6,9 @@
     "author": "Karsten Schmidt <[email protected]>",
     "license": "Apache-2.0",
     "scripts": {
-        "clean": "rm -rf .cache build out",
-        "build": "yarn clean && parcel build index.html -d out --public-url ./ --no-source-maps --no-cache --detailed-report --experimental-scope-hoisting",
-        "build:webpack": "../../node_modules/.bin/webpack --mode production",
-        "start": "parcel index.html -p 8080 --open --no-cache"
-    },
-    "devDependencies": {
-        "parcel-bundler": "^1.12.4",
-        "rimraf": "^2.6.3",
-        "terser": "^5.2.1",
-        "typescript": "^4.1.2"
+        "clean": "../../node_modules/.bin/rimraf build node_modules/.cache",
+        "start": "../../node_modules/.bin/snowpack dev",
+        "build": "../../node_modules/.bin/snowpack build"
     },
     "dependencies": {
         "@thi.ng/api": "latest",
@@ -40,5 +33,8 @@
             "transducers-hdom"
         ],
         "screenshot": "examples/bitmap-font.gif"
+    },
+    "devDependencies": {
+        "@types/snowpack-env": "^2.3.2"
     }
 }

examples/bitmap-font/index.html → examples/bitmap-font/public/index.html

@@ -27,6 +27,6 @@
                 >Source code</a
             >
         </div>
-        <script type="text/javascript" src="./src/index.ts"></script>
+        <script type="module" src="/_dist_/index.js"></script>
     </body>
 </html>