Merge branch 'main' into matrix

.github/workflows/ci.yml

@@ -18,6 +18,19 @@ jobs:
       - run: pnpm install --frozen-lockfile
       - run: pnpm test
 
+  windows:
+    runs-on: windows-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'pnpm'
+          cache-dependency-path: '**/pnpm-lock.yaml'
+      # only try to install on windows for now, e2e will fail on windows
+      - run: pnpm install --frozen-lockfile
+
   e2e:
     name: E2E on ${{ matrix.os }} (Node ${{ matrix.version }})
     strategy:

README.md

@@ -232,40 +232,40 @@ However, it isn't too difficult to make a file-based router.
 Here's a file-based example code with builder:
 
 ```tsx
-import url from "node:url";
-import path from "node:path";
-import { glob } from "glob";
-import { defineRouter } from "waku/router/server";
+import url from 'node:url';
+import path from 'node:path';
+import { glob } from 'glob';
+import { defineRouter } from 'waku/router/server';
 
 const routesDir = path.join(
   path.dirname(url.fileURLToPath(import.meta.url)),
-  "routes",
+  'routes',
 );
 
 export default defineRouter(
-  // getComponent (id is "**/layout" or "**/page")
+  // getComponent (id is '**/layout' or '**/page')
   async (id) => {
-    const files = await glob(${"`"}$\{id}.{tsx,js}${"`"}, { cwd: routesDir });
+    const files = await glob(${'`'}$\{id}.{tsx,js}${'`'}, { cwd: routesDir });
     if (files.length === 0) {
       return null;
     }
-    const items = id.split("/");
+    const items = id.split('/');
     switch (items.length) {
       case 1:
-        return import(${"`"}./routes/$\{items[0]}.tsx${"`"});
+        return import(${'`'}./routes/$\{items[0]}.tsx${'`'});
       case 2:
-        return import(${"`"}./routes/$\{items[0]}/$\{items[1]}.tsx${"`"});
+        return import(${'`'}./routes/$\{items[0]}/$\{items[1]}.tsx${'`'});
       case 3:
-        return import(${"`"}./routes/$\{items[0]}/$\{items[1]}/$\{items[2]}.tsx${"`"});
+        return import(${'`'}./routes/$\{items[0]}/$\{items[1]}/$\{items[2]}.tsx${'`'});
       default:
-        throw new Error("too deep route");
+        throw new Error('too deep route');
     }
   },
   // getPathsForBuild
   async () => {
-    const files = await glob("**/page.{tsx,js}", { cwd: routesDir });
+    const files = await glob('**/page.{tsx,js}', { cwd: routesDir });
     return files.map(
-      (file) => "/" + file.slice(0, Math.max(0, file.lastIndexOf("/"))),
+      (file) => '/' + file.slice(0, Math.max(0, file.lastIndexOf('/'))),
     );
   },
 );

package.json

@@ -8,7 +8,7 @@
     "dev": "pnpm -r --filter='./packages/*' run dev",
     "compile": "pnpm -r --filter='./packages/*' run compile",
     "csb-install-FIXME": "pnpm install --no-frozen-lockfile",
-    "postinstall": "test -d ./packages/waku/dist || (pnpm -r --filter='./packages/waku' run compile && pnpm install)",
+    "postinstall": "node ./scripts/postinstall.js",
     "test": "prettier -c . && eslint . && tsc -b",
     "e2e": "playwright test",
     "examples:dev": "(cd ./examples/${NAME} && pnpm run dev)",

packages/create-waku/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-waku",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "author": "Daishi Kato",
   "type": "module",
   "contributors": [
@@ -18,7 +18,7 @@
   ],
   "scripts": {
     "start": "node dist/cli.js",
-    "compile": "rm -rf template dist && pnpm run template && pnpm run build",
+    "compile": "rm -rf template dist *.tsbuildinfo && pnpm run template && pnpm run build",
     "template": "cp -r ../../examples template/",
     "build": "tsc -b"
   },

packages/waku/package.json

@@ -56,7 +56,7 @@
   ],
   "scripts": {
     "dev": "swc src -d dist -w",
-    "compile": "rm -rf dist && pnpm run compile:code && pnpm run compile:types && cp ../../README.md .",
+    "compile": "rm -rf dist *.tsbuildinfo && pnpm run compile:code && pnpm run compile:types && cp ../../README.md .",
     "compile:code": "swc src -d dist && swc src -d dist/cjs -C module.type=commonjs && echo '{\"type\":\"commonjs\"}' > dist/cjs/package.json",
     "compile:types": "tsc --project tsconfig.json"
   },

packages/website/package.json

@@ -10,8 +10,10 @@
     "start": "waku start --with-ssr"
   },
   "dependencies": {
+    "@uidotdev/usehooks": "^2.4.1",
     "bright": "^0.8.4",
     "express": "^4.18.2",
+    "next-mdx-remote": "^4.4.1",
     "react": "18.3.0-canary-0e352ea01-20231109",
     "react-dom": "18.3.0-canary-0e352ea01-20231109",
     "react-server-dom-webpack": "18.3.0-canary-0e352ea01-20231109",

packages/website/src/components/app.tsx

@@ -1,6 +1,7 @@
+import { Button } from './button.js';
+import { Content } from './content.js';
 import { Credits } from './credits.js';
-import { ShowHide } from './showhide.js';
-import { Code1 } from './code.js';
+import { Readme } from './readme.js';
 
 const App = () => {
   return (
@@ -27,35 +28,22 @@ const App = () => {
           The minimal React framework
         </h3>
         <div className="mt-12 flex flex-col justify-center gap-4 px-12 sm:mt-8 sm:flex-row sm:gap-6 sm:px-0">
+          <Readme>
+            <Content />
+          </Readme>
           {links.map((link) => (
-            <Link key={link.href} {...link} />
+            <Button key={link.href} {...link} />
           ))}
         </div>
       </div>
       <Credits />
-      <ShowHide>
-        <Code1 />
-      </ShowHide>
     </div>
   );
 };
 
-const Link = ({ href, children }: any) => {
-  return (
-    <a
-      href={href}
-      target="_blank"
-      rel="noopenner noreferrer"
-      className="rounded-md bg-red-900 px-4 py-3 text-base font-black uppercase leading-none tracking-wide text-red-50"
-    >
-      {children}
-    </a>
-  );
-};
-
 const links = [
   { href: 'https://github.com/dai-shi/waku', children: 'GitHub' },
-  { href: 'https://www.npmjs.com/package/waku', children: 'NPM' },
+  // { href: 'https://www.npmjs.com/package/waku', children: 'NPM' },
   { href: 'https://discord.gg/MrQdmzd', children: 'Discord' },
 ];
 

packages/website/src/components/button.tsx

@@ -0,0 +1,32 @@
+// FIXME we should be able to remove this directive
+'use client';
+
+import type { ComponentPropsWithoutRef, ElementType } from 'react';
+
+type ButtonProps = ComponentPropsWithoutRef<'button'> &
+  ComponentPropsWithoutRef<'a'>;
+
+export const Button = ({ href, children, ...rest }: ButtonProps) => {
+  let Element: ElementType = 'button';
+  const props: ButtonProps = {};
+
+  if (href) {
+    Element = 'a';
+    props.href = href;
+
+    if (href.startsWith('http')) {
+      props.target = '_blank';
+      props.rel = 'noopener noreferrer';
+    }
+  }
+
+  return (
+    <Element
+      className="rounded-md bg-red-900 px-4 py-3 text-base font-black uppercase leading-none tracking-wide text-red-50 transition duration-300 ease-in-out hover:bg-red-800"
+      {...props}
+      {...rest}
+    >
+      {children}
+    </Element>
+  );
+};

packages/website/src/components/code.tsx

@@ -1,26 +1,11 @@
-import { Code } from 'bright';
+import { Code as Component } from 'bright';
 
-const code1 = `
-import { lazy } from "react";
-import { defineEntries } from "waku/server";
+import theme from '../theme.json';
 
-const App = lazy(() => import("./components/App.js"));
+type CodeProps = {
+  code: string;
+};
 
-export default defineEntries(
-  // renderEntries
-  async (input) => {
-    return {
-      App: <App name={input || "Waku"} />,
-    };
-  },
-);
-`.trim();
-
-export const Code1 = () => (
-  <Code
-    className="border-cVanilla !m-0 max-w-xs overflow-scroll !rounded-2xl border-2 !p-0 sm:max-w-sm md:max-w-md lg:max-w-full"
-    theme="solarized-dark"
-    code={code1}
-    lang="tsx"
-  />
+export const Code = ({ code, ...rest }: CodeProps) => (
+  <Component lang="tsx" theme={theme} code={code.trim()} {...rest} />
 );

packages/website/src/components/content.tsx

@@ -0,0 +1,61 @@
+import fs from 'node:fs';
+// @ts-expect-error no exported member
+import { MDXRemote } from 'next-mdx-remote/rsc';
+
+import { Code } from './code.js';
+
+export const Content = () => {
+  const file = fs.readFileSync('../../README.md', 'utf8');
+  const source = `## Introduction${file
+    .split('## Introduction')[1]
+    ?.split('## Tweets')[0]}`;
+
+  return <MDXRemote source={source} components={components} />;
+};
+
+const components = {
+  h2: ({ children, ...rest }: any) => (
+    <h2
+      className="mb-2 mt-16 text-[2.75rem] font-bold leading-none first-of-type:mt-0"
+      {...rest}
+    >
+      {children}
+    </h2>
+  ),
+  h3: ({ children, ...rest }: any) => (
+    <h3 className="mb-2 mt-8 text-3xl font-bold leading-none" {...rest}>
+      {children}
+    </h3>
+  ),
+  h4: ({ children, ...rest }: any) => (
+    <h3
+      {...rest}
+      className="mb-2 mt-8 text-xl font-bold uppercase leading-none tracking-wide"
+    >
+      {children}
+    </h3>
+  ),
+  p: ({ children, ...rest }: any) => (
+    <p
+      className="mb-4 text-lg font-normal leading-normal text-white/60 lg:text-xl"
+      {...rest}
+    >
+      {children}
+    </p>
+  ),
+  code: ({ children, ...rest }: any) => (
+    <span
+      className="-my-0.5 inline-block rounded bg-gray-800 px-1.5 py-px font-mono text-base text-white/80"
+      {...rest}
+    >
+      {children}
+    </span>
+  ),
+  pre: ({ children, ...rest }: any) => (
+    <Code
+      code={children.props.children}
+      className="!-mx-[0.75em] !overflow-clip !rounded-xl !bg-gray-800 !p-[0.5em] !font-mono [&>*]:!bg-gray-800"
+      {...rest}
+    />
+  ),
+};

packages/website/src/components/modal.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { Fragment } from 'react';
+import type { ReactNode } from 'react';
+import { useClickAway } from '@uidotdev/usehooks';
+
+type ModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  children: ReactNode;
+};
+
+export const Modal = ({ isOpen, onClose, children }: ModalProps) => {
+  const ref: any = useClickAway(onClose);
+
+  if (!isOpen) return <Fragment />;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-8">
+      <div className="inline-block overflow-clip rounded-2xl border-8 border-gray-950 bg-gray-900 p-2">
+        <div
+          ref={ref}
+          className="relative aspect-[1/1] w-full max-w-4xl overflow-y-auto p-6 text-left text-white sm:aspect-[4/3] lg:aspect-[16/9] lg:p-10"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};

packages/website/src/components/readme.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { useState, Fragment } from 'react';
+import type { ReactNode } from 'react';
+
+import { Button } from './button.js';
+import { Modal } from './modal.js';
+
+type ReadmeProps = {
+  children: ReactNode;
+};
+
+export const Readme = ({ children }: ReadmeProps) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  return (
+    <Fragment>
+      <Button onClick={() => setIsOpen(true)}>Readme</Button>
+      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
+        {children}
+      </Modal>
+    </Fragment>
+  );
+};