feat: swc

examples/next-swc/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/next-swc/.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

examples/next-swc/.test-dev.spec.ts

@@ -0,0 +1,2 @@
+import { testRun } from './.testRun'
+testRun('npm run dev')

examples/next-swc/.test-prod.spec.ts

@@ -0,0 +1,2 @@
+import { testRun } from './.testRun'
+testRun('npm run prod')

examples/next-swc/.testRun.ts

@@ -0,0 +1,39 @@
+import { page, run, urlBase, autoRetry, fetchHtml } from '../../libframe/test/setup'
+
+export { testRun }
+
+function testRun(cmd: 'npm run dev' | 'npm run prod') {
+  run(cmd, {
+    serverIsReadyMessage: 'started server on'
+    /* Debug Next.js in GitHub Actions:
+    debug: true,
+    additionalTimeout: 240 * 1000,
+    serverIsReadyDelay: 20 * 1000,
+    //*/
+  })
+
+  test('To-do list and context', async () => {
+    const html = await fetchHtml('/')
+    expect(html).toContain('<h1>Elisabeth&#x27;s to-do list</h1>')
+    expect(html).toContain('<li>Buy milk</li>')
+    expect(html).toContain('<li>Buy strawberries</li>')
+    await page.goto(`${urlBase}/`)
+    const text = await page.textContent('body')
+    expect(text).toContain("Elisabeth's to-do list")
+    expect(text).toContain('Buy milk')
+    expect(text).toContain('Buy strawberries')
+  })
+
+  test('Add to-do item', async () => {
+    await page.fill('input[type="text"]', 'Buy bananas')
+    await page.click('button[type="submit"]')
+    await autoRetry(async () => {
+      expect(await page.textContent('body')).toContain('Buy bananas')
+    })
+  })
+
+  test('New to-do item is persisted & rendered to HTML', async () => {
+    const html = await fetchHtml('/')
+    expect(html).toContain('<li>Buy bananas</li>')
+  })
+}

examples/next-swc/auth/getUser.js

@@ -0,0 +1,9 @@
+export { getUser }
+
+function getUser(req) {
+  // Fake implementation. A real implementation would, for example, use `req.headers.cookie` to retrieve the logged-in user.
+  return {
+    id: 0,
+    name: 'Elisabeth'
+  }
+}

examples/next-swc/components/TodoList.jsx

@@ -0,0 +1,31 @@
+import React, { useState } from 'react'
+import { onNewTodo } from './TodoList.telefunc.js'
+
+export { TodoList }
+
+function TodoList({ todoItemsInitial }) {
+  const [todoItems, setTodoItems] = useState(todoItemsInitial)
+  const [text, setText] = useState('')
+  return (
+    <>
+      <ul>
+        {todoItems.map((todoItem, i) => (
+          <li key={i}>{todoItem.text}</li>
+        ))}
+        <li>
+          <form
+            onSubmit={async (ev) => {
+              ev.preventDefault()
+              setText('')
+              const { todoItems } = await onNewTodo({ text })
+              setTodoItems(todoItems)
+            }}
+          >
+            <input type="text" onChange={(ev) => setText(ev.target.value)} value={text} />{' '}
+            <button type="submit">Add to-do</button>
+          </form>
+        </li>
+      </ul>
+    </>
+  )
+}

examples/next-swc/components/TodoList.telefunc.js

@@ -0,0 +1,15 @@
+import { getContext, Abort } from 'telefunc'
+import { Todo } from '../database/Todo'
+
+export { onNewTodo }
+
+async function onNewTodo({ text }) {
+  const { user } = getContext()
+  if (!user) {
+    throw Abort()
+  }
+  const authorId = user.id
+  Todo.createNew({ text, authorId })
+  const todoItems = Todo.findMany({ authorId })
+  return { todoItems }
+}

examples/next-swc/database/Todo.js

@@ -0,0 +1,21 @@
+export { Todo }
+
+const Todo = {
+  findMany,
+  createNew
+}
+
+const database = (global.database = global.database || {
+  todoItems: [
+    { text: 'Buy milk', authorId: 0 },
+    { text: 'Buy strawberries', authorId: 0 }
+  ]
+})
+
+function findMany({ authorId }) {
+  return database.todoItems.filter((todoItem) => todoItem.authorId === authorId)
+}
+
+function createNew({ text, authorId }) {
+  database.todoItems.push({ text, authorId })
+}

examples/next-swc/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/next-swc/next.config.js

@@ -0,0 +1,9 @@
+module.exports = (phase, config) => {
+  console.log('here', phase, config)
+  return {
+    experimental: {
+      swcPlugins: [[require.resolve('telefunc/swc'), { displayName: true, basePath: __dirname }]]
+      // swcPlugins: [[require.resolve('css-variable/swc'), {displayName: true, basePath: __dirname}]]
+    }
+  }
+}

examples/next-swc/package.json

@@ -0,0 +1,14 @@
+{
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "prod": "next build && next start",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "12.2.2",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "telefunc": "0.1.22"
+  }
+}

examples/next-swc/pages/_app.jsx

@@ -0,0 +1,12 @@
+import { telefuncConfig } from 'telefunc/client'
+
+const isBrowser = typeof window !== 'undefined'
+if (isBrowser) {
+  telefuncConfig.telefuncUrl = '/api/_telefunc'
+}
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

examples/next-swc/pages/api/_telefunc.js

@@ -0,0 +1,13 @@
+import { getUser } from '../../auth/getUser'
+import { telefunc, telefuncConfig, provideTelefuncContext } from 'telefunc'
+
+telefuncConfig.telefuncUrl = '/api/_telefunc'
+
+export default async function (req, res) {
+  const user = getUser(req)
+  provideTelefuncContext({ user })
+  const { url, method, body } = req
+  const httpRequest = { url, method, body }
+  const httpResponse = await telefunc(httpRequest)
+  res.status(httpResponse.statusCode).send(httpResponse.body)
+}

examples/next-swc/pages/index.jsx

@@ -0,0 +1,26 @@
+import { getUser } from '../auth/getUser'
+import { TodoList } from '../components/TodoList'
+import { Todo } from '../database/Todo'
+
+export default Page
+
+function Page(props) {
+  const title = `${props.user.name}'s to-do list`
+  return (
+    <>
+      <h1>{title}</h1>
+      <TodoList todoItemsInitial={props.todoItemsInitial} />
+    </>
+  )
+}
+
+export async function getServerSideProps(context) {
+  const user = getUser(context.req)
+  const todoItems = Todo.findMany({ authorId: user.id })
+  return {
+    props: {
+      user,
+      todoItemsInitial: todoItems
+    }
+  }
+}