refactor: move it to a simple node app (#9)

* intial build movement

* intial build movement

* limit public assets

* fix: syncing

* refactor: simplify things and inline a dep

* chore: dependency cleanup

* chore: add fly deploy

Author: barelyhuman

.dockerignore

@@ -0,0 +1 @@
+/node_modules

.eslintrc

@@ -8,15 +8,15 @@ on:
     branches:
       - dev
   schedule:
-    - cron: '0 0 * * *'
+    - cron: "0 0 * * *"
 
 jobs:
   build:
     runs-on: ubuntu-latest
     strategy:
       matrix:
         node-version: [16.x]
-    
+
     permissions:
       contents: write
 
@@ -26,7 +26,7 @@ jobs:
         with:
           version: 6.32.10
       - run: pnpm i
-      - run: export GH_TOKEN=${{ secrets.GH_TOKEN }}; npm run sync; node scripts/fill-release-dates.js;
+      - run: export GH_TOKEN=${{ secrets.GITHUB_TOKEN }}; npm run sync; node scripts/fill-release-dates.js;
       - name: Commit changes
         uses: stefanzweifel/git-auto-commit-action@v5
         with:

.github/workflows/cron.yml

@@ -0,0 +1,16 @@
+name: Fly Deploy
+on:
+  push:
+    branches:
+      - main
+jobs:
+  deploy:
+    name: Deploy app
+    runs-on: ubuntu-latest
+    concurrency: deploy-group   
+    steps:
+      - uses: actions/checkout@v4
+      - uses: superfly/flyctl-actions/setup-flyctl@master
+      - run: flyctl deploy --remote-only
+        env:
+          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}

.github/workflows/fly-deploy.yml

@@ -0,0 +1,16 @@
+FROM node:20-alpine 
+
+WORKDIR /app 
+
+COPY . .
+
+RUN apk update && apk upgrade
+RUN apk add --no-cache sqlite
+
+RUN corepack enable
+RUN pnpm i --frozen-lockfile
+RUN pnpm build
+
+EXPOSE 3000
+
+CMD ["pnpm","start"]

.prettierignore

@@ -0,0 +1,107 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+  "files": {
+    "include": [
+      "**/*.mjs",
+      "**/*.js",
+      "**/*.css",
+      "**/*.json",
+      "**/*.jsx",
+      "**/*.njk"
+    ],
+    "ignore": ["node_modules", ".next", "tmp", "dist"]
+  },
+  "formatter": {
+    "enabled": true,
+    "useEditorconfig": true,
+    "formatWithErrors": false,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineEnding": "lf",
+    "lineWidth": 80,
+    "attributePosition": "auto",
+    "bracketSpacing": true
+  },
+  "organizeImports": { "enabled": true },
+  "linter": {
+    "enabled": false,
+    "rules": {
+      "recommended": false,
+      "complexity": {
+        "noExtraBooleanCast": "error",
+        "noForEach": "error",
+        "noMultipleSpacesInRegularExpressionLiterals": "error",
+        "noUselessCatch": "error",
+        "noWith": "error",
+        "useArrowFunction": "off"
+      },
+      "correctness": {
+        "noConstAssign": "error",
+        "noConstantCondition": "error",
+        "noEmptyCharacterClassInRegex": "error",
+        "noEmptyPattern": "error",
+        "noGlobalObjectCalls": "error",
+        "noInvalidBuiltinInstantiation": "error",
+        "noInvalidConstructorSuper": "error",
+        "noNonoctalDecimalEscape": "error",
+        "noPrecisionLoss": "error",
+        "noSelfAssign": "error",
+        "noSetterReturn": "error",
+        "noSwitchDeclarations": "error",
+        "noUndeclaredVariables": "error",
+        "noUnreachable": "error",
+        "noUnreachableSuper": "error",
+        "noUnsafeFinally": "error",
+        "noUnsafeOptionalChaining": "error",
+        "noUnusedLabels": "error",
+        "noUnusedPrivateClassMembers": "error",
+        "noUnusedVariables": "error",
+        "useIsNan": "error",
+        "useValidForDirection": "error",
+        "useYield": "error"
+      },
+      "style": { "useBlockStatements": "error", "useForOf": "warn" },
+      "suspicious": {
+        "noAssignInExpressions": "error",
+        "noAsyncPromiseExecutor": "error",
+        "noCatchAssign": "error",
+        "noClassAssign": "error",
+        "noCompareNegZero": "error",
+        "noControlCharactersInRegex": "error",
+        "noDebugger": "error",
+        "noDuplicateCase": "error",
+        "noDuplicateClassMembers": "error",
+        "noDuplicateObjectKeys": "error",
+        "noDuplicateParameters": "error",
+        "noEmptyBlockStatements": "error",
+        "noFallthroughSwitchClause": "error",
+        "noFunctionAssign": "error",
+        "noGlobalAssign": "error",
+        "noImportAssign": "error",
+        "noMisleadingCharacterClass": "error",
+        "noPrototypeBuiltins": "error",
+        "noRedeclare": "error",
+        "noShadowRestrictedNames": "error",
+        "noSparseArray": "error",
+        "noUnsafeNegation": "error",
+        "useGetterReturn": "error",
+        "useValidTypeof": "error"
+      }
+    }
+  },
+  "javascript": {
+    "jsxRuntime": "transparent",
+    "formatter": {
+      "jsxQuoteStyle": "double",
+      "quoteProperties": "asNeeded",
+      "trailingCommas": "es5",
+      "semicolons": "asNeeded",
+      "arrowParentheses": "asNeeded",
+      "bracketSameLine": false,
+      "quoteStyle": "single",
+      "attributePosition": "auto",
+      "bracketSpacing": true
+    },
+    "globals": ["exports"]
+  }
+}

.prettierrc.json

@@ -0,0 +1,107 @@
+import generatePkg from '@babel/generator'
+import { parse } from '@babel/parser'
+import traversePkg from '@babel/traverse'
+import esbuild from 'esbuild'
+import { nodeExternals } from 'esbuild-plugin-node-externals'
+import postcss from 'esbuild-postcss'
+import fs from 'fs/promises'
+import glob from 'tiny-glob'
+
+const generate = generatePkg.default
+const traverse = traversePkg.default
+
+const files = await glob('./pages/**/*.js', { filesOnly: true })
+
+const buildOptions = {
+  entryPoints: files,
+  bundle: true,
+  format: 'esm',
+  jsx: 'automatic',
+  jsxImportSource: 'preact',
+  loader: { '.js': 'jsx' },
+}
+
+await esbuild
+  .build({
+    ...buildOptions,
+    outdir: 'out',
+    platform: 'node',
+    target: 'node12',
+    plugins: [nodeExternals(), postcss()],
+  })
+  .catch(() => process.exit(1))
+
+await esbuild.build({
+  ...buildOptions,
+  outdir: 'out/client',
+  platform: 'browser',
+  plugins: [
+    postcss(),
+    {
+      name: 'remove-server-code',
+      setup(builder) {
+        builder.onLoad({ filter: /\.jsx?$/ }, async args => {
+          const source = await fs.readFile(args.path, 'utf8')
+          const ast = parse(source, { sourceType: 'module', plugins: ['jsx'] })
+
+          const importedDependencies = new Set()
+          let defaultExportName
+
+          traverse(ast, {
+            ImportDeclaration(path) {
+              path.node.specifiers.forEach(specifier => {
+                importedDependencies.add(specifier.local.name)
+              })
+            },
+            ExportDefaultDeclaration(path) {
+              defaultExportName = path.node.declaration?.name ?? false
+            },
+            FunctionDeclaration(path) {
+              if (path.node.id.name === 'getServerSideProps') {
+                const usedDependencies = new Set()
+                path.traverse({
+                  Identifier(innerPath) {
+                    if (importedDependencies.has(innerPath.node.name)) {
+                      usedDependencies.add(innerPath.node.name)
+                    }
+                  },
+                })
+                path.remove()
+                ast.program.body = ast.program.body.filter(node => {
+                  if (node.type === 'ImportDeclaration') {
+                    return !node.specifiers.some(specifier =>
+                      usedDependencies.has(specifier.local.name)
+                    )
+                  }
+                  return true
+                })
+              }
+            },
+          })
+
+          const { code } = generate(ast)
+
+          if (defaultExportName) {
+            return {
+              contents: `import { hydrate } from "preact"
+                ${code}
+                const pageProps = JSON.parse(document.getElementById("pageProps").textContent)
+                hydrate(<${defaultExportName} {...pageProps} />, document.getElementById("app"))
+              `,
+              loader: 'jsx',
+            }
+          } else {
+            console.warn(
+              `${args.path} doesn't name it's default export, please correct that`
+            )
+          }
+
+          return {
+            contents: code,
+            loader: 'jsx',
+          }
+        })
+      },
+    },
+  ],
+})

Dockerfile

@@ -1,17 +1,17 @@
-import React from 'react';
-import { modsToStyle } from 'spacery';
+import { h } from 'preact'
+import { modsToStyle } from '../lib/mods-to-style'
 
 const Box = function ({ elm = 'div', children, ...props }) {
-  const { style, sanitizedProps } = modsToStyle(props, ''); // pass dimension as an empty string so it used the actual numbers
+  const { style, sanitizedProps } = modsToStyle(props, '') // pass dimension as an empty string so it used the actual numbers
 
-  return React.createElement(
+  return h(
     elm,
     {
       style,
       ...sanitizedProps,
     },
     children
-  );
-};
+  )
+}
 
-export default Box;
+export default Box

biome.json

@@ -1,11 +1,11 @@
-import Box from './box';
+import Box from './box'
 
 export function Button({ children, primary, ...props }) {
   return (
     <>
-      <Box elm='button' className={`${primary && 'primary'} button`} {...props}>
+      <Box elm="button" className={`${primary && 'primary'} button`} {...props}>
         {children}
       </Box>
     </>
-  );
+  )
 }