Merge pull request #19 from nakasyou/react-to-solid

React to solid

.github/workflows/deno.yml

@@ -13,8 +13,8 @@ jobs:
     steps:
       - name: Clone repository
         uses: actions/checkout@v3
-      - name: Setup deno
-        uses: denoland/setup-deno@v1
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v1
       - uses: actions/cache@v3
         id: deno_cache
         env:
@@ -23,11 +23,14 @@ jobs:
           path: |
             node_modules
             /home/runner/.cache/deno
-          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/deno.lock', '**/pnpm-lock.yaml') }}
-      - name: Test deno cache dir
-        run: deno info
-      - name: Build Astro from Deno
-        run: deno task build
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/deno.lock', '**/bun.lock') }}
+      - name: Bun Install
+        run: bun i
+      - name: Build Astro from Bun
+        run: bun run build
+      - run: |
+          mkdir ./dist/dist
+          cp -r ./dist/client ./dist/dist/client
       - name: Deploy Astro Website
         uses: denoland/deployctl@v1
         with:

.prettierrc

@@ -1,3 +1,5 @@
 {
-  "semi": false
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "none"
 }

.vscode/settings.json

@@ -1,6 +1,12 @@
 {
     "deno.enable": false,
     "[astro]": {
-
+        "editor.tabSize": 2
+    },
+    "[svelte]": {
+        "editor.tabSize": 2
+    },
+    "[typescript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
     }
 }

README.md

@@ -3,6 +3,7 @@
 一言で言えば、デジタル赤シートです。
 二言で言えば、「じぶん」でつくる、暗記用デジタルノートブックです。
 あなたの暗記をサポートします！
+3.2.0
 ## 開発
 ### Develop using Deno
 開発モード:

astro.config.mjs

@@ -1,12 +1,17 @@
-import { defineConfig } from 'astro/config';
-import deno from "@astrojs/deno";
-
-import react from "@astrojs/react";
+import { defineConfig, squooshImageService, passthroughImageService } from 'astro/config';
 import tailwind from "@astrojs/tailwind";
+import solidJs from "@astrojs/solid-js";
+import svelte from "@astrojs/svelte";
+import deno from './integrations/deno';
 
 // https://astro.build/config
 export default defineConfig({
   output: "server",
   adapter: deno(),
-  integrations: [react(), tailwind()]
+  integrations: [tailwind({
+
+  }), solidJs(), svelte()],
+  image: {
+    service: passthroughImageService()
+  }
 });

integrations/deno/const/compatibleNodeModules.ts

@@ -0,0 +1,53 @@
+// REF: https://github.com/denoland/deno/tree/main/ext/node/polyfills
+export const compatibleNodeModules = [
+  "assert",
+  "assert/strict",
+  "async_hooks",
+  "buffer",
+  "child_process",
+  "cluster",
+  "console",
+  "constants",
+  "crypto",
+  "dgram",
+  "diagnostics_channel",
+  "dns",
+  "events",
+  "fs",
+  "fs/promises",
+  "http",
+  // 'http2',
+  "https",
+  "inspector",
+  "module",
+  "net",
+  "os",
+  "path",
+  "path/posix",
+  "path/win32",
+  "perf_hooks",
+  "process",
+  "punycode",
+  "querystring",
+  "readline",
+  "repl",
+  "stream",
+  "stream/promises",
+  "stream/web",
+  "string_decoder",
+  "sys",
+  "timers",
+  "timers/promises",
+  // 'tls',
+  "trace_events",
+  "tty",
+  "url",
+  "util",
+  "util/types",
+  // 'v8',
+  // 'vm',
+  // 'wasi',
+  // 'webcrypto',
+  "worker_threads",
+  "zlib",
+]

integrations/deno/index.ts

@@ -0,0 +1,51 @@
+import { type AstroConfig, type AstroIntegration } from "astro"
+import { fileURLToPath } from "url"
+import { compatibleNodeModules } from "./const/compatibleNodeModules"
+import { build } from 'esbuild'
+
+export default (): AstroIntegration => {
+  let buildConfig: AstroConfig['build']
+
+  return {
+    name: "deno-adapter",
+    hooks: {
+      "astro:config:done": ({ setAdapter, config }) => {
+        buildConfig = config.build
+        setAdapter({
+          name: "deno-adapter",
+          serverEntrypoint: "./integrations/deno/server/server.ts",
+          supportedAstroFeatures: {
+            staticOutput: "stable",
+            serverOutput: "stable",
+            assets: {
+
+            }
+          },
+        })
+      },
+      "astro:build:done": async () => {
+        const entryUrl = new URL(buildConfig.serverEntry, buildConfig.server)
+        const entryPath = fileURLToPath(entryUrl)
+        await build({
+          target: "esnext",
+          platform: 'node',
+          bundle: true,
+          allowOverwrite: true,
+          entryPoints: [entryPath],
+          outfile: entryPath,
+          format: "esm",
+          external: [
+            ...compatibleNodeModules.map((mod) => `node:${mod}`),
+            "@astrojs/markdown-remark",
+          ],
+          plugins: [],
+          minify: false,
+          alias: {
+            'hono': 'https://deno.land/x/[email protected]/mod.ts',
+            ...Object.fromEntries(compatibleNodeModules.map(mod => [mod, `node:${mod}`]))
+          }
+        })
+      }
+    },
+  }
+}

integrations/deno/server/server.ts

@@ -0,0 +1,64 @@
+// @ts-check
+// @ts-ignore
+import { Hono  } from 'hono'
+import { App } from 'astro/app';
+import path from 'node:path'
+
+declare global {
+  const Deno: {
+    readFile (path: string): Promise<Uint8Array>
+    serve (handler: (req: Request) => Promise<Response> | Response): void
+  }
+}
+
+const mimetypeMap: Record<string, string | undefined> = {
+  '.js': 'text/javascript',
+  '.html': 'text/html',
+  '.svg': 'image/svg+xml'
+}
+export async function start (manifest: import('astro').SSRManifest) {
+  const app = new App(manifest)
+
+  const honoApp = new Hono()
+  const setAsset = (assetData: {
+    path: string
+    filePath: string
+  }) => {
+    const ext = path.extname(assetData.path)
+    const asset = {
+      path: assetData.path,
+      extname: ext,
+      filePath: assetData.filePath,
+      mimetype: mimetypeMap[ext] || ''
+    }
+    honoApp.all(asset.path, async (c) => {
+      const file = await Deno.readFile(asset.filePath)
+      const buff = file.buffer as ArrayBuffer
+
+      if (asset.mimetype) {
+        c.header('Content-Type', asset.mimetype)
+      }
+      return c.body(buff)
+    })
+  }
+  const indexHtmlRegExp = /^.*\/index\.html$/
+  const removeIndexHtmlRegExp = /\/index\.html$/
+  for (const asset of [...manifest.assets]) {
+    setAsset({
+      path: asset,
+      filePath: path.join('dist/client', asset)
+    })
+    if (indexHtmlRegExp.test(asset)) {
+      setAsset({
+        path: asset.replace(removeIndexHtmlRegExp, ''),
+        filePath: path.join('dist/client', asset)
+      })
+    }
+  }
+  honoApp.all('/*', async (c) => {
+    const res = await app.render(c.req.raw)
+    return res
+  })
+  Deno.serve(honoApp.fetch);
+}
+

package.json

@@ -10,25 +10,33 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/deno": "^4.3.0",
-    "@astrojs/react": "^2.2.1",
-    "@astrojs/tailwind": "^4.0.0",
-    "@material/material-color-utilities": "^0.2.7",
-    "@tabler/icons-react": "^2.30.0",
+    "@astrojs/svelte": "latest",
+    "@astrojs/tailwind": "5.1.0",
+    "@astrojs/vercel": "7.0.2",
+    "@solid-primitives/keyed": "^1.2.0",
+    "@tabler/icons": "^2.44.0",
+    "@tabler/icons-solidjs": "^2.36.0",
+    "@tabler/icons-svelte": "^2.37.0",
     "@tailwindcss/typography": "^0.5.9",
-    "@tiptap/core": "^2.0.4",
-    "@tiptap/pm": "^2.0.4",
-    "@tiptap/react": "^2.0.4",
-    "@tiptap/starter-kit": "^2.0.4",
-    "@types/react": "^18.0.21",
-    "@types/react-dom": "^18.0.6",
+    "@tiptap/core": "^2.2.1",
+    "@tiptap/pm": "^2.1.11",
+    "@tiptap/starter-kit": "^2.2.1",
     "array-move": "^4.0.0",
-    "astro": "^2.10.4",
+    "astro": "4.2.6",
     "classnames": "^2.3.2",
+    "dexie": "^3.2.4",
     "fflate": "^0.8.0",
-    "mikanui": "^0.1.11",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "tailwindcss": "^3.0.24"
+    "mikanui": "^0.1.12",
+    "sharp": "0.33.0-alpha.6",
+    "solid-js": "^1.7.12",
+    "svelte": "^4.2.1",
+    "tailwindcss": "^3.0.24",
+    "valibot": "^0.24.1"
+  },
+  "devDependencies": {
+    "@astrojs/solid-js": "^3.0.1",
+    "bun-types": "^1.0.7",
+    "esbuild": "^0.19.5",
+    "hono": "^3.8.3"
   }
 }

postcss.config.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+  plugins: {
+    'postcss-import': {},
+    'tailwindcss/nesting': {},
+    tailwindcss: {},
+    autoprefixer: {},
+  }
+}

src/components/Footer.astro

@@ -1,7 +1,5 @@
 ---
-import {
-  IconBrandGithub
-} from '@tabler/icons-react'
+import IconBrandGithub from '@tabler/icons-svelte/dist/svelte/icons/IconBrandGithub.svelte'
 ---
 <div class="bg-on-surface text-surface">
   <div class="mx-5">

src/components/Header.astro

@@ -1,11 +1,12 @@
 ---
-import Icon from "../assets/icon.svg"
+import icon from "../assets/icon.svg"
+import Image from './Image.astro'
 ---
 <header class="w-full flex top-0 fixed dark:text-white">
   <div class="px-7 py-2 flex justify-between items-center w-full">
     <div class="flex items-center">
       <a href="/" class="flex items-center gap-2">
-        <img src={ Icon } alt="NanohaNote icon" class="w-10 h-10" />
+        <Image src={ icon } alt="NanohaNote icon" class="w-10 h-10" />
         <div class="text-xl">NanohaNote</div>
       </a>
     </div>

src/components/Image.astro

@@ -0,0 +1,8 @@
+---
+export interface Props {
+  alt: string
+  src: ImageMetadata
+  class?: string
+}
+---
+<img src={Astro.props.src.src} class={Astro.props.class} alt={Astro.props.alt} />

src/env.d.ts

@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />