Merge 1fdd2338f9 into 59dce3ce65

examples/routify/.gitignore

@@ -1,6 +1,9 @@
-/node_modules
+**/node_modules/
-/dist
+/dist/
 .DS_Store
+**/.history
+src/tmp/
 .routify
-yarn-debug.log*
+.netlify
-yarn-error.log*
+assets/build
+.vercel

examples/routify/.nolluprc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  hot: true,
+  contentBase: 'assets',
+  publicPath: 'build',
+  historyApiFallback: '__app.html',
+  port: 5000
+}

examples/routify/api/netlify/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "ssr",
+  "version": "1.0.0",
+  "description": "",
+  "main": "ssr.js",
+  "scripts": {
+    "build": "node utils/build.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "esbuild": "^0.8.8",
+    "tossr": "^1.3.1"
+  }
+}

examples/routify/api/netlify/ssr.js

@@ -0,0 +1,11 @@
+const fs = require('fs')
+const { tossr } = require('tossr')
+const { script, template } = require('./bundle.json')
+
+exports.handler = async (event, context) => {
+    const qs = Object.entries(event.queryStringParameters)
+        .map(([key, value]) => `${key}=${value}`)
+        .join('&');
+    const body = await tossr(template, script, `${event.path}?${qs}`);
+    return { statusCode: 200, body: body + '\n<!--ssr rendered-->' }
+}

examples/routify/api/netlify/utils/build.js

@@ -0,0 +1,26 @@
+/**
+ * Creates a JSON and inlines it with esbuild for ssr.js to consume
+ * {
+ *   data: duh,
+ *   script: inlined main.js
+ *   template: __app.html
+ * }
+ */
+
+const { resolve } = require('path')
+const { readFileSync, writeFileSync } = require('fs')
+const { build } = require('esbuild')
+
+const scriptPath = resolve(__dirname, '../../../dist/build/main.js')
+const templatePath = resolve(__dirname, '../../../dist/__app.html')
+const bundlePath = resolve(__dirname, '../build/bundle.js')
+
+build({ entryPoints: [scriptPath], outfile: bundlePath, bundle: true }).then(() => {
+    const bundle = {
+        date: new Date,
+        script: readFileSync(bundlePath, 'utf8'),
+        template: readFileSync(templatePath, 'utf8')
+    }
+
+    writeFileSync(resolve(__dirname, '../bundle.json'), JSON.stringify(bundle, null, 2))
+})

examples/routify/api/vercel-ssr/build.js

@@ -0,0 +1,36 @@
+const { resolve } = require('path')
+const { existsSync } = require('fs')
+const { execSync } = require('child_process')
+const { rollup } = require('rollup')
+
+const shouldBuildSpa = process.env.NOW_GITHUB_DEPLOYMENT || process.env.NOW_BUILDER
+const script = resolve(__dirname, '../../dist/build/main.js')
+const bundlePath = resolve(__dirname, '../../dist/build/bundle.js')
+
+build()
+
+
+async function build() {
+    if (shouldBuildSpa)
+        execSync('npm install && npm run build:app', { cwd: resolve('..', '..'), stdio: 'inherit' })
+    else
+        await waitForAppToExist()
+
+    buildSSRBundle()
+}
+
+async function waitForAppToExist() {
+    while (!existsSync(script)) {
+        console.log(`checking if "${script}" exists`)
+        await new Promise(r => setTimeout(r, 2000))
+    }
+    console.log(`found "${script}"`)
+}
+
+async function buildSSRBundle() {
+    const bundle = await rollup({
+        input: script,
+        inlineDynamicImports: true,
+    })
+    await bundle.write({ format: 'umd', file: bundlePath, name: 'roxi-ssr' })
+}

examples/routify/api/vercel-ssr/index.js

@@ -0,0 +1,11 @@
+const fs = require('fs')
+const { tossr } = require('tossr')
+
+const script = fs.readFileSync(require.resolve('../../dist/build/bundle.js'), 'utf8')
+const template = fs.readFileSync(require.resolve('../../dist/__app.html'), 'utf8')
+
+module.exports = async (req, res) => {
+    const html = await tossr(template, script, req.url, {})
+    res.send(html + '\n<!--ssr rendered-->')
+}
+

examples/routify/api/vercel-ssr/package.json

@@ -0,0 +1,8 @@
+{
+  "scripts": {
+    "vercel-build": "node ./build.js"
+  },
+  "devDependencies": {
+    "rollup": "^2.28.2"
+  }
+}

examples/routify/assets/404.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><linearGradient id="a" x1="2.625" x2="25.637" y1="13.491" y2="13.491" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2B2E81"/><stop offset="1" stop-color="#BE4F9C"/></linearGradient><path fill="url(#a)" d="M10.5 15.5H12v.5c0 .3.2.5.5.5s.5-.2.5-.5v-.5h.5c.3 0 .5-.2.5-.5s-.2-.5-.5-.5H13V13c0-.3-.2-.5-.5-.5s-.5.2-.5.5v1.5h-.9l.6-3.4c.1-.3-.1-.5-.4-.6-.3-.1-.5.1-.6.4l-.8 4c0 .1 0 .3.1.4s.4.2.5.2z"/><linearGradient id="b" x1="2.625" x2="25.637" y1="13.491" y2="13.491" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2B2E81"/><stop offset="1" stop-color="#BE4F9C"/></linearGradient><path fill="url(#b)" d="M20.5 15.5H22v.5c0 .3.2.5.5.5s.5-.2.5-.5v-.5h.5c.3 0 .5-.2.5-.5s-.2-.5-.5-.5H23V13c0-.3-.2-.5-.5-.5s-.5.2-.5.5v1.5h-.9l.6-3.4c.1-.3-.1-.5-.4-.6-.3-.1-.5.1-.6.4l-.8 4c0 .1 0 .3.1.4s.4.2.5.2z"/><linearGradient id="c" x1="2.625" x2="25.637" y1="22" y2="22" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2B2E81"/><stop offset="1" stop-color="#BE4F9C"/></linearGradient><path fill="url(#c)" d="M6.5 21.5h-.6c-.1-.3-.2-.6-.4-.9l.5-.4c.2-.2.2-.5 0-.7s-.5-.2-.7 0l-.4.4c-.3-.2-.6-.3-.9-.4V19c0-.3-.2-.5-.5-.5s-.5.2-.5.5v.6c-.3.1-.6.2-.9.4l-.4-.4c-.2-.2-.5-.2-.7 0s-.2.4 0 .6l.4.4c-.2.3-.3.6-.4.9H.5c-.3 0-.5.2-.5.5s.2.5.5.5h.6c.1.3.2.6.4.9l-.5.4c-.2.2-.2.5 0 .7.1.1.2.1.4.1s.3 0 .4-.1l.4-.4c.3.2.6.3.9.4v.5c0 .3.2.5.5.5s.4-.2.4-.5v-.6c.3-.1.6-.2.9-.4l.4.4c.1.1.2.1.4.1s.3 0 .4-.1c.2-.2.2-.5 0-.7l-.4-.4c.2-.3.3-.6.4-.9h.6c.1.1.3-.1.3-.4s-.2-.5-.5-.5zm-3 2c-.8 0-1.5-.7-1.5-1.5 0-.4.2-.8.4-1.1.3-.3.7-.4 1.1-.4.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5z"/><linearGradient id="d" x1="2.625" x2="25.637" y1="22" y2="22" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2B2E81"/><stop offset="1" stop-color="#BE4F9C"/></linearGradient><circle cx="3.5" cy="22" r=".5" fill="url(#d)"/><linearGradient id="e" x1="2.625" x2="25.637" y1="16" y2="16" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2B2E81"/><stop offset="1" stop-color="#BE4F9C"/></linearGradient><path fill="url(#e)" d="M31.5 12h-.8l.6-.6c.2-.2.2-.5 0-.7l-1.4-1.4c-.2-.2-.5-.2-.7 0l-.6.6V9c0-.3-.2-.5-.5-.5h-1V8c0-.8-.7-1.5-1.5-1.5h-17C7.7 6.5 7 7.2 7 8v5.6c-.3.1-.6.2-.9.4l-.4-.4c-.2-.2-.5-.2-.7 0s-.2.4 0 .6l.4.4c-.2.3-.3.6-.4.9h-.5c-.3 0-.5.2-.5.5s.2.5.5.5h.6c.1.3.2.6.4.9l-.5.4c-.2.2-.2.5 0 .7.1.1.2.1.4.1s.3 0 .4-.1l.4-.4c.3.2.6.3.9.4V20c0 .8.7 1.5 1.5 1.5H14v3h-3.5c-.3 0-.5.2-.5.5s.2.5.5.5h13c.3 0 .5-.2.5-.5s-.2-.5-.5-.5H20v-3h5.5c.8 0 1.5-.7 1.5-1.5v-1.5h1c.3 0 .5-.2.5-.5v-.8l.6.6c.2.2.5.2.7 0l1.4-1.4c.2-.2.2-.5 0-.7l-.5-.7h.8c.3 0 .5-.2.5-.5v-2c0-.3-.2-.5-.5-.5zm-4.5.5c.6 0 1 .4 1 1s-.4 1-1 1v-2zm-18.5-5h17c.3 0 .5.2.5.5v9.5H8V8c0-.3.2-.5.5-.5zM7 17.4c-.6-.2-1-.8-1-1.4 0-.4.2-.8.4-1.1.2-.2.4-.3.6-.3v2.8zm12 7.1h-4v-3h4v3zm6.5-4h-17c-.3 0-.5-.2-.5-.5v-1.5h18V20c0 .3-.2.5-.5.5zM31 14h-.7c-.2 0-.4.1-.5.4-.1.2-.1.4-.2.6-.1.2-.1.4.1.6l.5.5-.7.7-.5-.6c-.2-.2-.4-.2-.6-.1-.2.1-.4.2-.6.2-.2.1-.3.3-.3.5v.7H27v-2c1.1 0 2-.9 2-2s-.9-2-2-2v-2h.5v.7c0 .2.1.4.3.5.2.1.4.1.6.2.2.1.4.1.6-.1l.5-.5.7.7-.5.5c-.2.2-.2.4-.1.6.1.2.2.4.2.6.1.2.3.4.5.4h.7v.9z"/><linearGradient id="f" x1="2.625" x2="25.637" y1="13.5" y2="13.5" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2B2E81"/><stop offset="1" stop-color="#BE4F9C"/></linearGradient><path fill="url(#f)" d="M16.5 16.5h1c.8 0 1.5-.7 1.5-1.5v-3c0-.8-.7-1.5-1.5-1.5h-1c-.8 0-1.5.7-1.5 1.5v3c0 .8.7 1.5 1.5 1.5zM16 12c0-.3.2-.5.5-.5h1c.3 0 .5.2.5.5v3c0 .3-.2.5-.5.5h-1c-.3 0-.5-.2-.5-.5v-3z"/></svg>

examples/routify/assets/__app.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset='utf-8'>
+	<meta name='viewport' content='width=device-width,initial-scale=1'>
+
+	<title>Svelte app</title>
+
+	<meta name="theme-color" content="#E938C2">
+	<link rel="apple-touch-icon" href="images/touch-icons/logo-192.png">
+
+	<link rel="manifest" href="/manifest.json">
+	<link rel='icon' type='image/png' href='/favicon.png'>
+	<link rel='stylesheet' href='/build/bundle.css'>
+	<link rel="modulepreload" href="/build/main.js" />
+
+	<script type="module" src="/build/main.js"></script>
+</head>
+
+<body>
+	<noscript>Please enable Javascript for best experience.</noscript>
+</body>
+</html>

examples/routify/assets/global.css

@@ -0,0 +1,66 @@
+html, body {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+
+body {
+	color: #333;
+	margin: 0;
+	padding: 8px;
+	box-sizing: border-box;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+}
+
+a {
+	color: rgb(0,100,200);
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+a:visited {
+	color: rgb(0,80,160);
+}
+
+label {
+	display: block;
+}
+
+input, button, select, textarea {
+	font-family: inherit;
+	font-size: inherit;
+	padding: 0.4em;
+	margin: 0 0 0.5em 0;
+	box-sizing: border-box;
+	border: 1px solid #ccc;
+	border-radius: 2px;
+}
+
+input:disabled {
+	color: #ccc;
+}
+
+input[type="range"] {
+	height: 0;
+}
+
+button {
+	color: #333;
+	background-color: #f4f4f4;
+	outline: none;
+}
+
+button:disabled {
+	color: #999;
+}
+
+button:not(:disabled):active {
+	background-color: #ddd;
+}
+
+button:focus {
+	border-color: #666;
+}

examples/routify/assets/manifest.json

@@ -0,0 +1,21 @@
+{
+  "background_color": "#ffffff",
+  "theme_color": "#E938C2",
+  "name": "Routify app",
+  "short_name": "Routify app",
+  "start_url": "/",
+  "display": "standalone",
+  "icons": [
+    {
+      "src": "/images/touch-icons/logo-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/images/touch-icons/logo-800.png",
+      "sizes": "800x800",
+      "type": "image/png",
+      "purpose": "maskable any"
+    }
+  ]
+}

examples/routify/netlify.toml

@@ -0,0 +1,23 @@
+
+[build]
+  publish = "dist"
+  functions = "api/netlify"
+  command = "npm run build && cd api/netlify && npm run build"
+
+# Dev doesn't work yet. Any takers?
+# [dev]  
+  # command = "npm run dev:ssr"
+  # targetPort = 5000
+  # publish = "assets"
+  # autoLaunch = true
+
+[[redirects]]
+  # SSR and SPA
+  from = "/*"
+  to = "/.netlify/functions/ssr"
+  status = 200
+  
+  # SPA only
+  # from = "/*"
+  # to = "/__app.html"
+  # status = 200

examples/routify/package.json

@@ -1,40 +1,61 @@
 {
-  "version": "0.1.0",
+  "name": "routify-carbon-app",
-  "private": true,
+  "version": "1.0.0",
+  "@comments scripts": {
+    "dev": "develop with blazing fast rebuilds",
+    "dev:features": "develop with features like SSR and serviceworker enabled",
+    "build": "run build scripts below",
+    "build:app": "build single page application (SPA)",
+    "build:static": "Generate static pages",
+    "serve": "serve content in 'dist' folder",
+    "rollup": "run the rollup bundler",
+    "nollup": "run the nollup no-bundler",
+    "routify": "run routify"
+  },
   "scripts": {
-    "dev": "run-p dev:*",
+    "dev": "run-p routify nollup",
-    "dev:rollup": "rollup -cw",
+    "dev:ssr": "run-p routify rollup",
-    "dev:routify": "routify",
+    "build": "run-s build:*",
-    "build": "routify -b && rollup -c && routify export"
+    "build:app": "routify -b && rollup -c",
+    "build:static": "spank",
+    "serve": "spassr --ssr",
+    "rollup": "rollup -cw",
+    "nollup": "nollup -c",
+    "routify": "routify"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^13.0.0",
+    "@rollup/plugin-commonjs": "^15.0.0",
-    "@rollup/plugin-node-resolve": "^8.1.0",
+    "@rollup/plugin-node-resolve": "^10.0.0",
-    "@rollup/plugin-replace": "^2.3.3",
+    "@roxi/routify": "^2.8.5",
-    "@sveltech/routify": "^1.9.1",
+    "carbon-components-svelte": "^0.27.0",
-    "carbon-components-svelte": "^0.12.0",
+    "carbon-icons-svelte": "^10.23.0",
-    "marked": "^1.1.1",
+    "cross-env": "^7.0.2",
-    "mdsvex": "^0.8.2",
+    "fs-extra": "^9.0.1",
-    "node-sass": "^4.14.1",
+    "nollup": "^0.13.13",
     "npm-run-all": "^4.1.5",
-    "remark-slug": "^6.0.0",
+    "postcss": "^8.1.4",
-    "rollup": "^2.18.1",
+    "postcss-import": "^13.0.0",
-    "rollup-plugin-copy": "^3.3.0",
+    "rollup": "^2.33.1",
+    "rollup-plugin-hot": "^0.1.1",
+    "rollup-plugin-inject-process-env": "^1.3.1",
     "rollup-plugin-livereload": "^2.0.0",
-    "rollup-plugin-postcss": "^3.1.8",
+    "rollup-plugin-svelte": "^6.1.0",
-    "rollup-plugin-svelte": "^5.2.3",
+    "rollup-plugin-svelte-hot": "^0.11.1",
-    "rollup-plugin-svelte-hot": "^0.9.2",
     "rollup-plugin-terser": "^7.0.2",
-    "routify-plugin-frontmatter": "^1.0.1",
+    "rollup-plugin-workbox": "^5.2.1",
-    "spassr": "^1.1.2",
+    "spank": "^1.5.1",
-    "svelte": "^3.23.2"
+    "spassr": "^2.2.0",
+    "svelte": "^3.29.4",
+    "svelte-preprocess": "^4.5.2",
+    "tossr": "^1.3.1"
   },
   "routify": {
-    "extensions": "svelte,md",
+    "extensions": "svelte,html,svx,md"
-    "routifyDir": ".routify",
+  },
-    "dynamicImports": true,
+  "spassr": {},
-    "plugins": {
+  "spank": {
-      "routify-plugin-frontmatter": {}
+    "blacklist": [
-    }
+      "/example/modal/basic/4"
+    ]
   }
 }

examples/routify/rollup.config.js

@@ -1,24 +1,93 @@
-import { createRollupConfigs } from "./scripts/base.config.js";
+import svelte from 'rollup-plugin-svelte-hot';
-import slug from "remark-slug";
+import Hmr from 'rollup-plugin-hot'
-import { mdsvex } from "mdsvex";
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import livereload from 'rollup-plugin-livereload';
+import { terser } from 'rollup-plugin-terser';
+import { copySync, removeSync } from 'fs-extra'
+import { spassr } from 'spassr'
+import getConfig from '@roxi/routify/lib/utils/config'
+import autoPreprocess from 'svelte-preprocess'
+import postcssImport from 'postcss-import'
+import { injectManifest } from 'rollup-plugin-workbox'
+import injectProcessEnv from 'rollup-plugin-inject-process-env'
 
+
+const { distDir } = getConfig() // use Routify's distDir for SSOT
+const assetsDir = 'assets'
+const buildDir = `dist/build`
+const isNollup = !!process.env.NOLLUP
 const production = !process.env.ROLLUP_WATCH;
 
-export const config = {
+// clear previous builds
-  staticDir: "static",
+removeSync(distDir)
-  distDir: "dist",
+removeSync(buildDir)
-  buildDir: "dist/build",
-  serve: !production,
-  production,
-  rollupWrapper: (cfg) => cfg,
-  svelteWrapper: (svelte) => {
-    svelte.preprocess = [mdsvex({ remarkPlugins: [slug], extension: "md" })];
-    svelte.extensions = [".svelte", ".md"];
-    return svelte;
-  },
-  swWrapper: (cfg) => cfg,
-};
 
-const configs = createRollupConfigs(config);
 
-export default configs;
+const serve = () => ({
+    writeBundle: async () => {
+        const options = {
+            assetsDir: [assetsDir, distDir],
+            entrypoint: `${assetsDir}/__app.html`,
+            script: `${buildDir}/main.js`
+        }
+        spassr({ ...options, port: 5000 })
+        spassr({ ...options, ssr: true, port: 5005, ssrOptions: { inlineDynamicImports: true, dev: true } })
+    }
+})
+const copyToDist = () => ({ writeBundle() { copySync(assetsDir, distDir) } })
+
+
+export default {
+    preserveEntrySignatures: false,
+    input: [`src/main.js`],
+    output: {
+        sourcemap: true,
+        format: 'esm',
+        dir: buildDir,
+        // for performance, disabling filename hashing in development
+        chunkFileNames:`[name]${production && '-[hash]' || ''}.js`
+    },
+    plugins: [
+        svelte({
+            dev: !production, // run-time checks      
+            // Extract component CSS — better performance
+            css: css => css.write(`bundle.css`),
+            hot: isNollup,
+            preprocess: [
+                autoPreprocess({
+                    postcss: { plugins: [postcssImport()] },
+                    defaults: { style: 'postcss' }
+                })
+            ]
+        }),
+
+        // resolve matching modules from current working directory
+        resolve({
+            browser: true,
+            dedupe: importee => !!importee.match(/svelte(\/|$)/)
+        }),
+        commonjs(),
+
+        production && terser(),
+        !production && !isNollup && serve(),
+        !production && !isNollup && livereload(distDir), // refresh entire window when code is updated
+        !production && isNollup && Hmr({ inMemory: true, public: assetsDir, }), // refresh only updated code
+        injectProcessEnv({
+            NODE_ENV: production ? 'production': 'development'
+        }),
+        injectManifest({
+            globDirectory: assetsDir,
+            globPatterns: ['**/*.{js,css,svg}', '__app.html'],
+            swSrc: `src/sw.js`,
+            swDest: `${distDir}/serviceworker.js`,
+            maximumFileSizeToCacheInBytes: 10000000, // 10 MB,
+            mode: 'production'
+        }),
+        production && copyToDist(),
+    ],
+    watch: {
+        clearScreen: false,
+        buildDelay: 100,
+    }
+}

examples/routify/sandbox.config.json

@@ -0,0 +1,6 @@
+{
+  "container": {
+    "port": 5000,
+    "template": "node"
+  }
+}

examples/routify/scripts/base.config.js

@@ -1,98 +0,0 @@
-import svelte from "rollup-plugin-svelte-hot";
-import resolve from "@rollup/plugin-node-resolve";
-import commonjs from "@rollup/plugin-commonjs";
-import livereload from "rollup-plugin-livereload";
-import { terser } from "rollup-plugin-terser";
-import copy from "rollup-plugin-copy";
-import fs from "fs";
-import replace from "@rollup/plugin-replace";
-import postcss from "rollup-plugin-postcss";
-import { spassr } from "spassr";
-import { version } from "../package.json";
-
-export function createRollupConfigs(config) {
-  const { production, serve, distDir } = config;
-  const useDynamicImports = process.env.BUNDLING === "dynamic" || !!production;
-
-  fs.rmdirSync(distDir, { recursive: true });
-
-  if (serve) spassr({ serveSpa: true, serveSsr: true, silent: false });
-
-  return [
-    baseConfig(config, { dynamicImports: false }),
-    useDynamicImports && baseConfig(config, { dynamicImports: true }),
-  ].filter(Boolean);
-}
-
-function baseConfig(config, ctx) {
-  const { dynamicImports } = ctx;
-  const {
-    staticDir,
-    distDir,
-    production,
-    buildDir,
-    svelteWrapper,
-    rollupWrapper,
-  } = config;
-
-  const outputConfig = !!dynamicImports
-    ? { format: "esm", dir: buildDir }
-    : { format: "iife", file: `${buildDir}/bundle.js` };
-
-  const svelteConfig = {
-    dev: !production,
-    css: (css) => css.write(`${buildDir}/bundle.css`, !production),
-    hot: false,
-  };
-
-  const rollupConfig = {
-    inlineDynamicImports: !dynamicImports,
-    input: "src/main.js",
-    output: { name: "routify_app", sourcemap: !production, ...outputConfig },
-    plugins: [
-      copy({
-        targets: [
-          { src: [`${staticDir}/*`, "!*/(__index.html)"], dest: distDir },
-          {
-            src: [`${staticDir}/__index.html`],
-            dest: distDir,
-            rename: "__app.html",
-            transform,
-          },
-        ],
-        copyOnce: true,
-        flatten: false,
-      }),
-      replace({ "process.env.VERSION": JSON.stringify(version) }),
-      postcss({
-        extract: "bundle.css",
-        extensions: [".css"],
-      }),
-      svelte(svelteWrapper(svelteConfig, ctx)),
-      resolve({
-        browser: true,
-        dedupe: (importee) => !!importee.match(/svelte(\/|$)/),
-      }),
-      commonjs(),
-      production && terser(),
-      !production && livereload(distDir),
-    ],
-    watch: {
-      clearScreen: false,
-      buildDelay: 100,
-    },
-  };
-
-  return rollupWrapper(rollupConfig, ctx);
-
-  function transform(contents) {
-    const scriptTag =
-      typeof config.scriptTag != "undefined"
-        ? config.scriptTag
-        : '<script type="module" defer src="/build/main.js"></script>';
-    const bundleTag = '<script defer src="/build/bundle.js"></script>';
-    return contents
-      .toString()
-      .replace("__SCRIPT__", dynamicImports ? scriptTag : bundleTag);
-  }
-}

examples/routify/src/App.svelte

@@ -1,6 +1,10 @@
 <script>
-  import { Router } from "@sveltech/routify";
+  import { Router } from "@roxi/routify";
   import { routes } from "../.routify/routes";
 </script>
 
-<Router routes="{routes}" />
+<style  global>
+  @import "carbon-components-svelte/css/all.css";
+</style>
+
+<Router {routes} />

examples/routify/src/Serviceworker.svelte

@@ -0,0 +1,19 @@
+<script>
+  /**
+   * This file handles serviceworker registration
+   * To enable it, import it from another file, ie. src/pages/_layout.svelte
+   * For configuring the serviceworker, refer to sw.js
+   */
+  if ("serviceWorker" in navigator) {
+    import("workbox-window").then(async ({ Workbox }) => {
+      const wb = new Workbox("/serviceworker.js");
+      const registration = await wb.register();
+
+      // Reload the page if the PWA has been updated. Change strategy if needed.
+      wb.addEventListener("redundant", () => {
+        location.reload();
+        console.log("updated app");
+      });
+    });
+  }
+</script>

examples/routify/src/main.js

@@ -1,7 +1,6 @@
-import "carbon-components-svelte/css/all.css";
+import HMR from '@roxi/routify/hmr'
-import HMR from "@sveltech/routify/hmr";
+import App from './App.svelte';
-import App from "./App.svelte";
 
-const app = HMR(App, { target: document.body }, "routify-app");
+const app = HMR(App, { target: document.body }, 'routify-carbon-app')
 
-export default app;
+export default app;

examples/routify/src/pages/_fallback.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { url } from "@sveltech/routify";
+  import { url } from "@roxi/routify";
   import { Row, Column, Link } from "carbon-components-svelte";
 </script>
 

examples/routify/src/pages/_layout.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { metatags, page } from "@sveltech/routify";
+  import { metatags, page } from "@roxi/routify";
   import { Content, Grid } from "carbon-components-svelte";
   import Navigation from "./_navigation.svelte";
   import Theme from "../components/Theme.svelte";

examples/routify/src/sw.js

@@ -0,0 +1,108 @@
+// @ts-check
+
+import { registerRoute, setDefaultHandler, setCatchHandler } from 'workbox-routing';
+import { CacheFirst, NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies';
+import { skipWaiting, clientsClaim } from 'workbox-core';
+import { precacheAndRoute, matchPrecache } from 'workbox-precaching';
+import { ExpirationPlugin } from 'workbox-expiration';
+import { RoutifyPlugin, freshCacheData } from '@roxi/routify/workbox-plugin'
+
+
+
+/**********
+ * CONFIG *
+ **********/
+
+const entrypointUrl = '__app.html' // entrypoint
+const fallbackImage = '404.svg'
+const files = self.__WB_MANIFEST // files matching globDirectory and globPattern in rollup.config.js
+
+const externalAssetsConfig = () => ({
+  cacheName: 'external',
+  plugins: [
+    RoutifyPlugin({
+      validFor: 60 // cache is considered fresh for n seconds.
+    }),
+    new ExpirationPlugin({
+      maxEntries: 50, // last used entries will be purged when we hit this limit
+      purgeOnQuotaError: true // purge external assets on quota error
+    })]
+})
+
+
+
+
+/**************
+ * INITIALIZE *
+ **************/
+
+/**
+ * precache all files
+ * remember to precache __app.html and 404.svg if caching of all files is disabled
+ */
+precacheAndRoute(files)
+
+/** precache only fallback files */
+// precacheAndRoute(files.filter(file =>
+//   ['__app.html', '404.svg']
+//     .includes(file.url)
+// ))
+
+skipWaiting() // auto update service workers across all tabs when new release is available
+clientsClaim() // take control of client without having to wait for refresh
+
+/** 
+ * manually upgrade service worker by sending a SKIP_WAITING message.
+ * (remember to disable skipWaiting() above)
+ */
+// addEventListener('message', event => { if (event.data && event.data.type === 'SKIP_WAITING') skipWaiting(); });
+
+
+
+/**********
+ * ROUTES *
+ **********/
+
+// serve local pages from the SPA entry point (__app.html)
+registerRoute(isLocalPage, matchPrecache(entrypointUrl))
+
+// serve local assets from cache first
+registerRoute(isLocalAsset, new CacheFirst())
+
+// serve external assets from cache if they're fresh
+registerRoute(hasFreshCache, new CacheFirst(externalAssetsConfig()))
+
+// serve external pages and assets
+setDefaultHandler(new NetworkFirst(externalAssetsConfig()));
+
+// serve a fallback for 404s if possible or respond with an error
+setCatchHandler(async ({ event }) => {
+  switch (event.request.destination) {
+    case 'document':
+      return await matchPrecache(entrypointUrl)
+    case 'image':
+      return await matchPrecache(fallbackImage)
+    default:
+      return Response.error();
+  }
+})
+
+
+
+/**********
+ * CONDITIONS *
+ **********/
+
+function isLocalAsset({ url, request }) { return url.host === self.location.host && request.destination != 'document' }
+function isLocalPage({ url, request }) { return url.host === self.location.host && request.destination === 'document' }
+function hasFreshCache(event) { return !!freshCacheData(event) }
+
+/** Example condition */
+function hasWitheringCache(event) {
+  const cache = freshCacheData(event)
+  if (cache) {
+    const { cachedAt, validFor, validLeft, validUntil } = cache
+    // return true if half the fresh time has passed
+    return validFor / 2 > validFor - validLeft
+  }
+}

examples/routify/static/__index.html

@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="shortcut icon" href="/favicon.ico" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <title>routify</title>
-    <link rel="stylesheet" href="/build/bundle.css" />
-    __SCRIPT__
-  </head>
-  <body></body>
-</html>

examples/routify/vercel.json

@@ -0,0 +1,17 @@
+{
+  "version": 2,
+  "functions": {
+    "api/vercel-ssr/index.js": {
+      "includeFiles": "dist/**"
+    }
+  },
+  "routes": [
+    {
+      "handle": "filesystem"
+    },
+    {
+      "src": "/.*",
+      "dest": "/api/vercel-ssr/index.js"
+    }
+  ]
+}