chore: Better dev environment, docs, landing, and tests.

Blankeos · Blankeos · commit a5b09b030d79 · 2024-10-17T05:06:27.000+08:00
diff --git a/.prettierrc b/.prettierrc
@@ -3,9 +3,8 @@
   "tabWidth": 2,
   "printWidth": 100,
   "plugins": ["prettier-plugin-tailwindcss"],
-  "semi": false,
+  "semi": true,
   "singleQuote": true,
   "useTabs": false,
-  "arrowParens": "avoid",
   "bracketSpacing": true
 }
diff --git a/bun.lockb b/bun.lockb
diff --git a/dev/index.html b/dev/index.html
diff --git a/dev/index.tsx b/dev/index.tsx
diff --git a/dev/pages/+Layout.tsx b/dev/pages/+Layout.tsx
@@ -0,0 +1,6 @@
+import { FlowProps } from 'solid-js'
+import '../styles.css'
+
+export default function Layout(props: FlowProps) {
+  return <>{props.children}</>
+}
diff --git a/dev/pages/+Page.tsx b/dev/pages/+Page.tsx
@@ -1,14 +1,13 @@
-import type { Component } from 'solid-js'
-
-import NumberFlow from '../src'
+import NumberFlow, { useCanAnimate } from '../../src';
 
 // @ts-ignore
-import Usage from './markdown/usage.md'
+import Usage from '../markdown/usage.md';
 // @ts-ignore
-import NPMInstall from './markdown/npm-install.md'
+import NPMInstall from '../markdown/npm-install.md';
+
+export default function HomePage() {
+  const [value, cycle] = useCycle([398.43, -3243.5, 1435237]);
 
-const App: Component = () => {
-  const [value, cycle] = useCycle([398.43, -3243.5, 1435237])
   return (
     <div class="min-h-screen bg-zinc-950 text-white">
       <div class="mx-auto flex w-full max-w-4xl flex-col items-center gap-y-5 px-8 py-20">
@@ -21,7 +20,7 @@ const App: Component = () => {
         <button
           class="flex items-center gap-x-2 rounded-full bg-neutral-900 px-6 py-3 active:scale-95"
           onClick={() => {
-            cycle()
+            cycle();
           }}
         >
           <IconShuffle />
@@ -40,46 +39,43 @@ const App: Component = () => {
           </a>
         </p>
 
-        <div class="w-full max-w-xl overflow-hidden rounded-md border border-zinc-500 bg-[#121212] bg-zinc-800 p-5">
+        <div class="w-full max-w-xl overflow-hidden rounded-md border border-zinc-500 bg-[#121212] p-5">
           <Markdown children={<NPMInstall />} />
         </div>
 
-        <div class="w-full max-w-xl overflow-hidden rounded-md border border-zinc-500 bg-[#121212] bg-zinc-800 p-5">
-          {/* <SolidMarkdown /> */}
+        <div class="w-full max-w-xl overflow-hidden rounded-md border border-zinc-500 bg-[#121212] p-5">
           <Markdown children={<Usage />} />
         </div>
       </div>
     </div>
-  )
+  );
 }
 
-export default App
-
-import { createMemo, createSignal } from 'solid-js'
-import { IconShuffle } from './icons/shuffle'
-import { IconSolidJS } from './icons/solidjs'
-import { Markdown } from './markdown'
+import { createEffect, createMemo, createSignal } from 'solid-js';
+import { IconShuffle } from '../icons/shuffle';
+import { IconSolidJS } from '../icons/solidjs';
+import { Markdown } from '../markdown';
 
 /**
  * A hook that toggles between two or multiple values (by implementing a common state pattern).
  *
  * Forked from https://github.com/Blankeos/bagon-hooks/blob/main/src/use-toggle/use-toggle.ts
  */
-export function useCycle<T = boolean>(options: readonly T[] = [false, true] as any) {
-  const [_options, _setOptions] = createSignal<typeof options>(options)
+function useCycle<T = boolean>(options: readonly T[] = [false, true] as any) {
+  const [_options, _setOptions] = createSignal<typeof options>(options);
 
   function toggle() {
-    const value = _options()[0]!
-    const index = Math.abs(_options()!.indexOf(value))
+    const value = _options()[0]!;
+    const index = Math.abs(_options()!.indexOf(value));
 
     _setOptions(
       _options()!
         .slice(index + 1)
         .concat(value),
-    )
+    );
   }
 
-  const currentOption = createMemo(() => _options()[0]!)
+  const currentOption = createMemo(() => _options()[0]!);
 
-  return [currentOption, toggle] as const
+  return [currentOption, toggle] as const;
 }
diff --git a/dev/pages/+config.ts b/dev/pages/+config.ts
@@ -0,0 +1,8 @@
+import config from 'vike-solid/config';
+import type { Config } from 'vike/types';
+
+// Default config (can be overridden by pages)
+export default {
+  extends: [config],
+  ssr: true,
+} satisfies Config;
diff --git a/dev/pages/_error/+Page.tsx b/dev/pages/_error/+Page.tsx
@@ -0,0 +1,20 @@
+import { Show } from "solid-js";
+import { usePageContext } from "vike-solid/usePageContext";
+
+export default function Page() {
+  const { is404 } = usePageContext();
+  return (
+    <Show
+      when={is404}
+      fallback={
+        <>
+          <h1>500 Internal Server Error</h1>
+          <p>Something went wrong.</p>
+        </>
+      }
+    >
+      <h1>404 Page Not Found</h1>
+      <p>This page could not be found.</p>
+    </Show>
+  );
+}
diff --git a/dev/vite.config.ts b/dev/vite.config.ts
@@ -1,7 +1,10 @@
-import path from 'node:path'
-import solidMarkedPlugin from 'unplugin-solid-marked'
-import { defineConfig } from 'vite'
-import solidPlugin from 'vite-plugin-solid'
+import path from 'node:path';
+import solidMarkedPlugin from 'unplugin-solid-marked';
+import { defineConfig } from 'vite';
+
+// Vike
+import vikeSolid from 'vike-solid/vite';
+import vike from 'vike/plugin';
 
 export default defineConfig({
   resolve: {
@@ -11,12 +14,11 @@ export default defineConfig({
   },
   plugins: [
     solidMarkedPlugin.vite({}),
-    solidPlugin(),
     {
       name: 'Reaplace env variables',
       transform(code, id) {
         if (id.includes('node_modules')) {
-          return code
+          return code;
         }
         return code
           .replace(/process\.env\.SSR/g, 'false')
@@ -26,14 +28,16 @@ export default defineConfig({
           .replace(/import\.meta\.env\.SSR/g, 'false')
           .replace(/import\.meta\.env\.DEV/g, 'true')
           .replace(/import\.meta\.env\.PROD/g, 'false')
-          .replace(/import\.meta\.env\.NODE_ENV/g, '"development"')
+          .replace(/import\.meta\.env\.NODE_ENV/g, '"development"');
       },
     },
+    vike({}),
+    vikeSolid(),
   ],
   server: {
     port: 3000,
   },
   build: {
     target: 'esnext',
   },
-})
+});
diff --git a/package.json b/package.json
@@ -43,6 +43,7 @@
   "scripts": {
     "dev": "vite serve dev",
     "build": "tsup",
+    "build:site": "vite build dev",
     "test": "concurrently bun:test:*",
     "test:client": "vitest",
     "test:ssr": "bun run test:client --mode ssr",
@@ -69,20 +70,22 @@
     "esbuild-plugin-solid": "^0.6.0",
     "eslint": "^8.56.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
-    "eslint-plugin-no-only-tests": "^3.1.0",
+    "eslint-plugin-no-only-tests": "^3.3.0",
     "jsdom": "^24.0.0",
     "postcss": "^8.4.47",
-    "prettier": "3.0.0",
+    "prettier": "3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.8",
     "shikiji": "^0.10.2",
-    "solid-js": "^1.8.17",
+    "solid-js": "^1.9.2",
     "solid-marked": "^0.6.3",
     "tailwindcss": "^3.4.14",
-    "tsup": "^8.0.2",
+    "tsup": "^8.3.0",
     "tsup-preset-solid": "^2.2.0",
-    "typescript": "^5.4.5",
+    "typescript": "^5.6.3",
     "unplugin-solid-marked": "^0.6.3",
-    "vite": "^5.2.11",
+    "vike": "^0.4.199",
+    "vike-solid": "^0.7.6",
+    "vite": "^5.4.9",
     "vite-plugin-solid": "^2.10.2",
     "vitest": "^1.6.0"
   },
diff --git a/test/index.test.tsx b/test/index.test.tsx
@@ -1,47 +1,10 @@
-import { createRoot, createSignal } from 'solid-js'
-import { isServer } from 'solid-js/web'
-import { describe, expect, it } from 'vitest'
+import { createRoot, createSignal } from 'solid-js';
+import { isServer } from 'solid-js/web';
+import { describe, expect, it } from 'vitest';
 
 describe('environment', () => {
-  // it('runs on client', () => {
-  //   expect(typeof window).toBe('object')
-  //   expect(isServer).toBe(false)
-  // })
-})
-
-describe('createHello', () => {
-  // it('Returns a Hello World signal', () =>
-  //   createRoot(dispose => {
-  //     const [hello] = createHello()
-  //     expect(hello()).toBe('Hello World!')
-  //     dispose()
-  //   }))
-  // it('Changes the hello target', () =>
-  //   createRoot(dispose => {
-  //     const [hello, setHello] = createHello()
-  //     setHello('Solid')
-  //     expect(hello()).toBe('Hello Solid!')
-  //     dispose()
-  //   }))
-})
-
-describe('Hello', () => {
-  // it('renders a hello component', () => {
-  //   createRoot(() => {
-  //     const container = (<Hello />) as HTMLDivElement
-  //     expect(container.outerHTML).toBe('<div>Hello World!</div>')
-  //   })
-  // })
-  // it('changes the hello target', () =>
-  //   createRoot(dispose => {
-  //     const [to, setTo] = createSignal('Solid')
-  //     const container = (<Hello to={to()} />) as HTMLDivElement
-  //     expect(container.outerHTML).toBe('<div>Hello Solid!</div>')
-  //     setTo('Tests')
-  //     // rendering is async
-  //     queueMicrotask(() => {
-  //       expect(container.outerHTML).toBe('<div>Hello Tests!</div>')
-  //       dispose()
-  //     })
-  //   }))
-})
+  it('runs on client', () => {
+    expect(typeof window).toBe('object');
+    expect(isServer).toBe(false);
+  });
+});
diff --git a/test/server.test.tsx b/test/server.test.tsx
@@ -1,28 +1,10 @@
-import { describe, expect, it } from 'vitest'
-import { isServer, renderToString } from 'solid-js/web'
-
-describe('environment', () => {
-  // it('runs on server', () => {
-  //   expect(typeof window).toBe('undefined')
-  //   expect(isServer).toBe(true)
-  // })
-})
-
-describe('createHello', () => {
-  // it('Returns a Hello World signal', () => {
-  //   const [hello] = createHello()
-  //   expect(hello()).toBe('Hello World!')
-  // })
-  // it('Changes the hello target', () => {
-  //   const [hello, setHello] = createHello()
-  //   setHello('Solid')
-  //   expect(hello()).toBe('Hello Solid!')
-  // })
-})
+import { describe, expect, it } from 'vitest';
+import { renderToString } from 'solid-js/web';
+import NumberFlow from 'src';
 
 describe('Hello', () => {
-  // it('renders a hello component', () => {
-  //   const string = renderToString(() => <Hello />)
-  //   expect(string).toBe('<div>Hello World!</div>')
-  // })
-})
+  it('renders a hello component', () => {
+    const string = renderToString(() => <NumberFlow value={123} />);
+    expect(string).toContain('123');
+  });
+});
