chore!: sapper -> sveltekit migration 🚀

.gitignore

@@ -1,9 +1,6 @@
 .DS_Store
 /node_modules/
-/src/node_modules/@sapper/
 yarn-error.log
-/__sapper__/
-/src/template.html
 /static/*.css
 /static/icons.svg
 /static/inline-script.js.map
@@ -13,4 +10,8 @@ yarn-error.log
 /vercel.json
 
 # Intellij IDEA
-.idea/
+.idea/
+.svelte-kit
+.vercel
+.env.local
+dist

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "editor.formatOnSave": false,
+  "prettier.singleQuote": true
+}

bin/build-assets.js

@@ -1,8 +1,12 @@
 import path from 'path'
 import fs from 'fs'
 import { promisify } from 'util'
-import { LOCALE } from '../src/routes/_static/intl'
-import { getIntl, trimWhitespace } from './getIntl'
+import { LOCALE } from '../src/routes/_static/intl.js'
+import { getIntl, trimWhitespace } from './getIntl.js'
+import { fileURLToPath } from 'url'
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 const readFile = promisify(fs.readFile)
 const writeFile = promisify(fs.writeFile)

bin/build-inline-script.js

@@ -3,11 +3,15 @@ import fs from 'fs'
 import { promisify } from 'util'
 import path from 'path'
 import { rollup } from 'rollup'
-import { terser } from 'rollup-plugin-terser'
+import { terser } from '@wwa/rollup-plugin-terser'
 import replace from '@rollup/plugin-replace'
-import fromPairs from 'lodash-es/fromPairs'
-import { themes } from '../src/routes/_static/themes'
-import terserOptions from './terserOptions'
+import fromPairs from 'lodash-es/fromPairs.js'
+import { themes } from '../src/routes/_static/themes.js'
+import terserOptions from './terserOptions.js'
+import { fileURLToPath } from 'url'
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 const writeFile = promisify(fs.writeFile)
 
@@ -42,7 +46,7 @@ export async function buildInlineScript () {
   const checksum = crypto.createHash('sha256').update(fullCode, 'utf8').digest('base64')
 
   await writeFile(path.resolve(__dirname, '../src/inline-script/checksum.js'),
-    `module.exports = ${JSON.stringify(checksum)}`, 'utf8')
+    `export default ${JSON.stringify(checksum)}`, 'utf8')
   await writeFile(path.resolve(__dirname, '../static/inline-script.js.map'),
     map.toString(), 'utf8')
 

bin/build-sass.js

@@ -3,7 +3,12 @@ import path from 'path'
 import fs from 'fs'
 import { promisify } from 'util'
 import cssDedoupe from 'css-dedoupe'
-import { TextDecoder } from 'text-encoding'
+import TextEncoding from 'text-encoding'
+import { fileURLToPath } from 'url'
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
 
 const writeFile = promisify(fs.writeFile)
 const readdir = promisify(fs.readdir)
@@ -30,7 +35,7 @@ async function compileThemesSass () {
   const files = (await readdir(themesScssDir)).filter(file => !path.basename(file).startsWith('_') && !path.basename(file).startsWith('.'))
   await Promise.all(files.map(async file => {
     let css = await renderCss(path.join(themesScssDir, file))
-    css = cssDedoupe(new TextDecoder('utf-8').decode(css)) // remove duplicate custom properties
+    css = cssDedoupe(new TextEncoding.TextDecoder('utf-8').decode(css)) // remove duplicate custom properties
     const outputFilename = 'theme-' + path.basename(file).replace(/\.scss$/, '.css')
     await writeFile(path.join(assetsDir, outputFilename), css, 'utf8')
   }))

bin/build-svg.js

@@ -1,9 +1,13 @@
-import svgs from './svgs'
+import svgs from './svgs.js'
 import path from 'path'
 import fs from 'fs'
 import { promisify } from 'util'
 import { optimize } from 'svgo'
 import $ from 'cheerio'
+import { fileURLToPath } from 'url'
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 const readFile = promisify(fs.readFile)
 const writeFile = promisify(fs.writeFile)

bin/build-template-html.js

@@ -1,15 +1,21 @@
 import chokidar from 'chokidar'
 import fs from 'fs'
 import path from 'path'
+import debounce from 'lodash-es/debounce.js'
 import { promisify } from 'util'
-import { buildSass } from './build-sass'
-import { buildInlineScript } from './build-inline-script'
-import { buildSvg } from './build-svg'
 import { performance } from 'perf_hooks'
-import debounce from 'lodash-es/debounce'
-import applyIntl from '../webpack/svelte-intl-loader'
-import { LOCALE } from '../src/routes/_static/intl'
-import { getLangDir } from 'rtl-detect'
+import rltDetect from 'rtl-detect'
+import { buildSass } from './build-sass.js'
+import { buildInlineScript } from './build-inline-script.js'
+import { buildSvg } from './build-svg.js'
+import applyIntl from '../svelte-intl-loader.js'
+import { LOCALE } from '../src/routes/_static/intl.js'
+import { fileURLToPath } from 'url'
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const { getLangDir } = rltDetect
 
 const writeFile = promisify(fs.writeFile)
 const LOCALE_DIRECTION = getLangDir(LOCALE)
@@ -37,7 +43,7 @@ const builders = [
 const partials = buildPartials()
 
 function buildPartials () {
-  const rawTemplate = fs.readFileSync(path.resolve(__dirname, '../src/build/template.html'), 'utf8')
+  const rawTemplate = fs.readFileSync(path.resolve(__dirname, '../src/build/app.html'), 'utf8')
 
   const partials = [rawTemplate]
 
@@ -94,7 +100,7 @@ async function buildAll () {
   html = applyIntl(html)
     .replace('{process.env.LOCALE}', LOCALE)
     .replace('{process.env.LOCALE_DIRECTION}', LOCALE_DIRECTION)
-  await writeFile(path.resolve(__dirname, '../src/template.html'), html, 'utf8')
+  await writeFile(path.resolve(__dirname, '../src/app.html'), html, 'utf8')
   const end = performance.now()
   console.log(`Built template.html in ${(end - start).toFixed(2)}ms`)
 }

bin/build-vercel-json.js

@@ -5,30 +5,20 @@
 import path from 'path'
 import fs from 'fs'
 import { promisify } from 'util'
-import { routes } from './routes'
-import cloneDeep from 'lodash-es/cloneDeep'
-import inlineScriptChecksum from '../src/inline-script/checksum'
-import { sapperInlineScriptChecksums } from '../src/server/sapperInlineScriptChecksums'
+import { routes } from './routes.js'
+import cloneDeep from 'lodash-es/cloneDeep.js'
+import { fileURLToPath } from 'url'
 
 const writeFile = promisify(fs.writeFile)
 
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
 const JSON_TEMPLATE = {
   version: 2,
   env: {
     NODE_ENV: 'production'
   },
-  github: {
-    silent: true
-  },
-  builds: [
-    {
-      src: 'package.json',
-      use: '@now/static-build',
-      config: {
-        distDir: '__sapper__/export'
-      }
-    }
-  ],
   routes: [
     {
       src: '^/service-worker\\.js$',
@@ -58,24 +48,18 @@ const JSON_TEMPLATE = {
   ]
 }
 
-const SCRIPT_CHECKSUMS = [inlineScriptChecksum]
-  .concat(sapperInlineScriptChecksums)
-  .map(_ => `'sha256-${_}'`)
-  .join(' ')
-
 const PERMISSIONS_POLICY = 'sync-xhr=(),document-domain=()'
 
 const HTML_HEADERS = {
   'cache-control': 'public,max-age=3600',
   'content-security-policy': [
     "default-src 'self'",
-    `script-src 'self' 'unsafe-eval' ${SCRIPT_CHECKSUMS}`,
     "worker-src 'self'",
     "style-src 'self' 'unsafe-inline'",
     "img-src 'self' * data: blob:",
     "media-src 'self' *",
     "connect-src 'self' * data: blob: *.blocto.app *.onflow.org *.portto.io *.portto.com",
-    "frame-src https://fcl-discovery.onflow.org https://*.blocto.app",
+    'frame-src https://fcl-discovery.onflow.org https://*.blocto.app',
     "frame-ancestors 'none'",
     "object-src 'none'",
     "manifest-src 'self'",

bin/getIntl.js

@@ -1,26 +1,30 @@
-import { get } from 'lodash-es'
-import { DEFAULT_LOCALE, LOCALE } from '../src/routes/_static/intl'
-import path from 'path'
+import get from 'lodash-es/get.js';
+import { DEFAULT_LOCALE, LOCALE } from '../src/routes/_static/intl.js';
+import path from 'path';
+import { fileURLToPath } from 'url';
 
-const intl = require(path.join(__dirname, '../src/intl', LOCALE + '.js'))
-const defaultIntl = require(path.join(__dirname, '../src/intl', DEFAULT_LOCALE + '.js'))
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
-export function warningOrError (message) { // avoid crashing the whole server on `yarn dev`
-  if (process.env.NODE_ENV === 'production') {
-    throw new Error(message)
+const {default: intl} = await import(path.join(__dirname, '../src/intl', LOCALE + '.js'))
+const {default: defaultIntl} = await import(path.join(__dirname, '../src/intl', DEFAULT_LOCALE + '.js'))
+
+export function warningOrError(message) {
+  // avoid crashing the whole server on `yarn dev`
+  if (import.meta.env.PROD) {
+    throw new Error(message);
   }
-  console.warn(message)
-  return '(Placeholder intl string)'
+  return '(Placeholder intl string)';
 }
 
-export function getIntl (path) {
-  const res = get(intl, path, get(defaultIntl, path))
+export function getIntl(path) {
+  const res = get(intl, path, get(defaultIntl, path));
   if (typeof res !== 'string') {
-    return warningOrError('Unknown intl string: ' + JSON.stringify(path))
+    return warningOrError('Unknown intl string: ' + JSON.stringify(path));
   }
-  return res
+  return res;
 }
 
-export function trimWhitespace (str) {
-  return str.trim().replace(/\s+/g, ' ')
+export function trimWhitespace(str) {
+  return str.trim().replace(/\s+/g, ' ');
 }

bin/routes.js

@@ -67,4 +67,4 @@ export const routes = [
   { pattern: /^\/posts\/([^/]+?)\/tmm\/?$/ },
   { pattern: /^\/tags\/([^/]+?)\/?$/ },
   { pattern: /^\/go\/?$/ }
-]
+]

bin/svgs.js

@@ -1,4 +1,4 @@
-module.exports = [
+export default [
   { id: 'sequel-logo', src: 'src/static/sequel.svg', inline: true },
   { id: 'fediverse-logo', src: 'src/static/fediverse.svg', inline: true },
   { id: 'nft-diamond', src: 'src/static/nft.svg', inline: true },

bin/terserOptions.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default  {
   ecma: 8,
   mangle: true,
   compress: {

build/docker/app/Dockerfile

@@ -7,14 +7,12 @@ WORKDIR /app
 COPY . /app
 
 # Install Sequel App
-RUN npm --production install && \
+RUN npm install && \
     npm run build && \
     npm cache clean --force && \
     rm -rf ./src ./docs ./tests ./bin
 
 # Expose port 3005
 EXPOSE 3005
 
-# Setting run-command, using explicit `node` command
-# rather than `yarn` or `npm` to use less memory
-CMD PORT=3005 node server.js
+CMD PORT=3005 node dist/index.js

intl-plugin.js

@@ -0,0 +1,18 @@
+import svelteIntlLoader from './svelte-intl-loader'
+
+const fileRegex = /\.(js|html|svelte)$/
+
+export default function intlLoader () {
+  return {
+    name: 'intl-loader',
+    enforce: 'pre',
+    transform (src, id) {
+      if (fileRegex.test(id)) {
+        return {
+          code: svelteIntlLoader(src),
+          map: null // provide source map if available
+        }
+      }
+    }
+  }
+}