carbon-design-system · lamualfa · Feb 3, 2021
diff --git a/examples/routify/.gitignore b/examples/routify/.gitignore
@@ -1,6 +1,9 @@
-/node_modules
-/dist
+**/node_modules/
+/dist/
 .DS_Store
+**/.history
+src/tmp/
 .routify
-yarn-debug.log*
-yarn-error.log*
+.netlify
+assets/build
+.vercel
diff --git a/examples/routify/.nolluprc.js b/examples/routify/.nolluprc.js
@@ -0,0 +1,7 @@
+module.exports = {
+  hot: true,
+  contentBase: 'assets',
+  publicPath: 'build',
+  historyApiFallback: '__app.html',
+  port: 5000
+}
diff --git a/examples/routify/api/netlify/package.json b/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"
+  }
+}
diff --git a/examples/routify/api/netlify/ssr.js b/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-->' }
+}
diff --git a/examples/routify/api/netlify/utils/build.js b/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))
+})
diff --git a/examples/routify/api/vercel-ssr/build.js b/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' })
+}
diff --git a/examples/routify/api/vercel-ssr/index.js b/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-->')
+}
+
diff --git a/examples/routify/api/vercel-ssr/package.json b/examples/routify/api/vercel-ssr/package.json
@@ -0,0 +1,8 @@
+{
+  "scripts": {
+    "vercel-build": "node ./build.js"
+  },
+  "devDependencies": {
+    "rollup": "^2.28.2"
+  }
+}
diff --git a/examples/routify/assets/404.svg b/examples/routify/assets/404.svg
diff --git a/examples/routify/assets/__app.html b/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>
diff --git a/examples/routify/assets/favicon.ico b/examples/routify/assets/favicon.ico
diff --git a/examples/routify/assets/favicon.png b/examples/routify/assets/favicon.png
diff --git a/examples/routify/assets/global.css b/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;
+}
diff --git a/examples/routify/assets/images/touch-icons/logo-192.png b/examples/routify/assets/images/touch-icons/logo-192.png
diff --git a/examples/routify/assets/images/touch-icons/logo-800.png b/examples/routify/assets/images/touch-icons/logo-800.png
diff --git a/examples/routify/assets/manifest.json b/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"
+    }
+  ]
+}
diff --git a/examples/routify/static/robots.txt → examples/routify/assets/robots.txt b/examples/routify/static/robots.txt → examples/routify/assets/robots.txt
diff --git a/examples/routify/netlify.toml b/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
diff --git a/examples/routify/package.json b/examples/routify/package.json
@@ -1,40 +1,61 @@
 {
-  "version": "0.1.0",
-  "private": true,
+  "name": "routify-carbon-app",
+  "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:rollup": "rollup -cw",
-    "dev:routify": "routify",
-    "build": "routify -b && rollup -c && routify export"
+    "dev": "run-p routify nollup",
+    "dev:ssr": "run-p routify rollup",
+    "build": "run-s build:*",
+    "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-node-resolve": "^8.1.0",
-    "@rollup/plugin-replace": "^2.3.3",
-    "@sveltech/routify": "^1.9.1",
-    "carbon-components-svelte": "^0.12.0",
-    "marked": "^1.1.1",
-    "mdsvex": "^0.8.2",
-    "node-sass": "^4.14.1",
+    "@rollup/plugin-commonjs": "^15.0.0",
+    "@rollup/plugin-node-resolve": "^10.0.0",
+    "@roxi/routify": "^2.8.5",
+    "carbon-components-svelte": "^0.27.0",
+    "carbon-icons-svelte": "^10.23.0",
+    "cross-env": "^7.0.2",
+    "fs-extra": "^9.0.1",
+    "nollup": "^0.13.13",
     "npm-run-all": "^4.1.5",
-    "remark-slug": "^6.0.0",
-    "rollup": "^2.18.1",
-    "rollup-plugin-copy": "^3.3.0",
+    "postcss": "^8.1.4",
+    "postcss-import": "^13.0.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": "^5.2.3",
-    "rollup-plugin-svelte-hot": "^0.9.2",
+    "rollup-plugin-svelte": "^6.1.0",
+    "rollup-plugin-svelte-hot": "^0.11.1",
     "rollup-plugin-terser": "^7.0.2",
-    "routify-plugin-frontmatter": "^1.0.1",
-    "spassr": "^1.1.2",
-    "svelte": "^3.23.2"
+    "rollup-plugin-workbox": "^5.2.1",
+    "spank": "^1.5.1",
+    "spassr": "^2.2.0",
+    "svelte": "^3.29.4",
+    "svelte-preprocess": "^4.5.2",
+    "tossr": "^1.3.1"
   },
   "routify": {
-    "extensions": "svelte,md",
-    "routifyDir": ".routify",
-    "dynamicImports": true,
-    "plugins": {
-      "routify-plugin-frontmatter": {}
-    }
+    "extensions": "svelte,html,svx,md"
+  },
+  "spassr": {},
+  "spank": {
+    "blacklist": [
+      "/example/modal/basic/4"
+    ]
   }
 }