Initial commit

.editorconfig

@@ -0,0 +1,9 @@
+# https://editorconfig.org/
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+charset = utf-8

.github/workflows/publish.yml

@@ -0,0 +1,50 @@
+name: Deploy
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    name: Deploy
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - uses: pnpm/action-setup@v3
+        name: Install pnpm
+        with:
+          version: 8
+          run_install: false
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build
+        run: npm run build
+
+      - name: Deploy
+        uses: cloudflare/wrangler-action@v3
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          command: deploy --env production

.gitignore

@@ -0,0 +1,3 @@
+/node_modules/
+/dist/
+.wrangler

.husky/commit-msg

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no -- commitlint --edit $1
+npx --no -- @jannajs/lint emojify $1

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no -- lint-staged

.vscode/settings.json

@@ -0,0 +1,52 @@
+{
+  // Enable the ESlint flat config support
+  "eslint.experimental.useFlatConfig": true,
+
+  // Disable the default formatter, use eslint instead
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.sortImports": "never"
+  },
+
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    // 存在部分暂时不能自动修复的，比如 style/max-statements-per-line
+    // { "rule": "style/*", "severity": "off" },
+    // 开发环境不宜隐藏
+    // { "rule": "format/*", "severity": "off" },
+    // { "rule": "*-indent", "severity": "off" },
+    // { "rule": "*-spacing", "severity": "off" },
+    // { "rule": "*-spaces", "severity": "off" },
+    // { "rule": "*-order", "severity": "off" },
+    // { "rule": "*-dangle", "severity": "off" },
+    // { "rule": "*-newline", "severity": "off" },
+    // { "rule": "*quotes", "severity": "off" },
+    // { "rule": "*semi", "severity": "off" }
+  ],
+
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml",
+    "toml",
+    "css",
+    "less",
+    "scss",
+    "sass"
+  ],
+  "cSpell.words": [
+    "brillout"
+  ],
+  "css.lint.unknownAtRules": "ignore"
+}

README.md

@@ -0,0 +1,47 @@
+[Cloudflare Workers](https://workers.cloudflare.com/) with:
+
+- Vite
+- Vike
+- React
+- [`react-streaming`](https://github.com/brillout/react-streaming)
+- Universal `fetch()`
+
+## Docs
+
+See [vike.dev/cloudflare-workers](https://vike.dev/cloudflare-workers).
+
+## Run
+
+```bash
+git clone [email protected]:vikejs/vike
+cd vike/examples/cloudflare-workers-react-full/
+npm install
+```
+
+Develop:
+
+> For increased development speed, we use an Express.js development server instead of a worker.
+
+```bash
+npm run dev
+```
+
+Preview the worker locally:
+
+> You'll need to login/create a Cloudflare account.
+
+```bash
+npm run preview
+```
+
+Deploy the worker to Cloudflare:
+
+```bash
+npm run deploy
+```
+
+## Universal `fetch()`
+
+Note how we define a fetch function at `pageContext.fetch` that is universal: it works for development as well as for the production worker.
+
+The trick is to provide a different `fetch()` implementation at [worker/ssr.ts](worker/ssr.ts) and [dev-server/index.js](dev-server/index.js).

commitlint.config.ts

@@ -0,0 +1,130 @@
+import type { UserConfig } from '@commitlint/types'
+
+const config: UserConfig = {
+  // ref: https://github.com/conventional-changelog/commitlint/tree/master/%40commitlint/config-conventional
+  // ref: https://www.conventionalcommits.org/en/v1.0.0/#summary
+  extends: ['@commitlint/config-conventional'],
+  // [Question] how to extend and override config-conventional settings:
+  // https://github.com/conventional-changelog/commitlint/issues/2232
+  rules: {
+    'type-enum': [
+      2,
+      'always',
+      [
+        'feat',
+        'fix',
+        'docs',
+        'style',
+        'refactor',
+        'perf',
+        'test',
+        'build',
+        'ci',
+        'chore',
+        'revert',
+      ],
+    ],
+  },
+  // ref: https://commitlint.js.org/#/reference-prompt
+  prompt: {
+    questions: {
+      type: {
+        description: 'Select the type of change that you\'re committing',
+        enum: {
+          feat: {
+            description: 'A new feature',
+            title: 'Features',
+            emoji: '✨',
+          },
+          fix: {
+            description: 'A bug fix',
+            title: 'Bug Fixes',
+            emoji: '🐛',
+          },
+          docs: {
+            description: 'Documentation only changes',
+            title: 'Documentation',
+            emoji: '📚',
+          },
+          style: {
+            description:
+              'Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)',
+            title: 'Styles',
+            emoji: '💎',
+          },
+          refactor: {
+            description:
+              'A code change that neither fixes a bug nor adds a feature',
+            title: 'Code Refactoring',
+            emoji: '📦',
+          },
+          perf: {
+            description: 'A code change that improves performance',
+            title: 'Performance Improvements',
+            emoji: '🚀',
+          },
+          test: {
+            description: 'Adding missing tests or correcting existing tests',
+            title: 'Tests',
+            emoji: '🚨',
+          },
+          build: {
+            description:
+              'Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)',
+            title: 'Builds',
+            emoji: '🛠',
+          },
+          ci: {
+            description:
+              'Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)',
+            title: 'Continuous Integrations',
+            emoji: '⚙️',
+          },
+          chore: {
+            description: 'Other changes that don\'t modify src or test files',
+            title: 'Chores',
+            emoji: '♻️',
+          },
+          revert: {
+            description: 'Reverts a previous commit',
+            title: 'Reverts',
+            emoji: '🗑',
+          },
+        },
+      },
+      scope: {
+        description:
+          'What is the scope of this change (e.g. component or file name)',
+      },
+      subject: {
+        description:
+          'Write a short, imperative tense description of the change',
+      },
+      body: {
+        description: 'Provide a longer description of the change',
+      },
+      isBreaking: {
+        description: 'Are there any breaking changes?',
+      },
+      breakingBody: {
+        description:
+          'A BREAKING CHANGE commit requires a body. Please enter a longer description of the commit itself',
+      },
+      breaking: {
+        description: 'Describe the breaking changes',
+      },
+      isIssueAffected: {
+        description: 'Does this change affect any open issues?',
+      },
+      issuesBody: {
+        description:
+          'If issues are closed, the commit requires a body. Please enter a longer description of the commit itself',
+      },
+      issues: {
+        description: 'Add issue references (e.g. "fix #123", "re #123".)',
+      },
+    },
+  },
+}
+
+export default config

dev-server/index.ts

@@ -0,0 +1,63 @@
+// We use a Express.js server for development
+
+import express from 'express'
+import { renderPage } from 'vike/server'
+import { createServer } from 'vite'
+import fetch from 'node-fetch'
+import compression from 'compression'
+
+import { getRequest, setResponse } from './request-transform'
+
+import { handleApi } from '#src/server/api/_root'
+
+const PORT = 3000
+
+async function startServer() {
+  const app = express()
+
+  // We don't need gzip compression for dev. We use compression just to show
+  // that it's properly handled by Vike and react-streaming.
+  app.use(compression())
+
+  const viteDevMiddleware = (
+    await createServer({
+      server: { middlewareMode: true },
+    })
+  ).middlewares
+  app.use(viteDevMiddleware)
+
+  // TODO: support api HMR or hot reload
+  app.route('/api/*').all(async (req, res, next) => {
+    const nodeRequest = await getRequest(`http://localhost:${PORT}`, req)
+    const nodeResponse = await handleApi(nodeRequest)
+    await setResponse(res, nodeResponse)
+  })
+
+  app.get('*', async (req, res, next) => {
+    const userAgent = req.headers['user-agent'] || null
+
+    const pageContextInit = {
+      urlOriginal: req.originalUrl,
+      fetch,
+      userAgent,
+    }
+    const pageContext = await renderPage(pageContextInit)
+    const { httpResponse } = pageContext
+
+    if (!httpResponse) {
+      return next()
+    }
+    else {
+      const { statusCode, headers } = httpResponse
+      headers.forEach(([name, value]) => res.setHeader(name, value))
+      res.status(statusCode)
+      httpResponse.pipe(res)
+    }
+  })
+
+  app.listen(PORT)
+  // eslint-disable-next-line no-console
+  console.log(`Server running at http://localhost:${PORT}`)
+}
+
+startServer()