create-waku 0.7.2 → 0.7.4

package/template/14_react-tweet/src/components/footer.tsx

@@ -0,0 +1,18 @@
+export const Footer = () => {
+  return (
+    <footer className="fixed bottom-0 left-0 p-6">
+      <div>
+        visit{' '}
+        <a
+          href="https://waku.gg/"
+          target="_blank"
+          rel="noreferrer"
+          className="mt-4 inline-block underline"
+        >
+          waku.gg
+        </a>{' '}
+        to learn more
+      </div>
+    </footer>
+  );
+};

package/template/14_react-tweet/src/components/header.tsx

@@ -0,0 +1,7 @@
+export const Header = () => {
+  return (
+    <header className="fixed left-0 top-0 p-6">
+      <h2 className="text-lg font-bold tracking-tight">Waku starter</h2>
+    </header>
+  );
+};

package/template/14_react-tweet/src/entries.tsx

@@ -0,0 +1,18 @@
+import { createPages } from 'waku';
+
+import { RootLayout } from './templates/root-layout.js';
+import { HomePage } from './templates/home-page.js';
+
+export default createPages(async ({ createPage, createLayout }) => {
+  createLayout({
+    render: 'static',
+    path: '/',
+    component: RootLayout,
+  });
+
+  createPage({
+    render: 'static',
+    path: '/',
+    component: HomePage,
+  });
+});

package/template/14_react-tweet/src/main.tsx

@@ -0,0 +1,19 @@
+import { StrictMode } from 'react';
+import { createRoot, hydrateRoot } from 'react-dom/client';
+import { Router } from 'waku/router/client';
+
+import { ErrorBoundary } from './components/error-boundary.js';
+
+const rootElement = (
+  <StrictMode>
+    <ErrorBoundary fallback={(error) => <h1>{String(error)}</h1>}>
+      <Router />
+    </ErrorBoundary>
+  </StrictMode>
+);
+
+if (import.meta.env.WAKU_HYDRATE) {
+  hydrateRoot(document.body, rootElement);
+} else {
+  createRoot(document.body).render(rootElement);
+}

package/template/14_react-tweet/src/styles.css

@@ -0,0 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/template/14_react-tweet/src/templates/home-page.tsx

@@ -0,0 +1,22 @@
+import { Tweet } from 'react-tweet';
+
+export const HomePage = async () => {
+  const data = await getData();
+
+  return (
+    <div>
+      <title>{data.title}</title>
+      <h1 className="text-4xl font-bold tracking-tight">{data.headline}</h1>
+      <Tweet id="1735308967880823082" />
+    </div>
+  );
+};
+
+const getData = async () => {
+  const data = {
+    title: 'Waku',
+    headline: 'Waku',
+  };
+
+  return data;
+};

package/template/14_react-tweet/src/templates/root-layout.tsx

@@ -0,0 +1,33 @@
+import '../styles.css';
+
+import type { ReactNode } from 'react';
+
+import { Header } from '../components/header.js';
+import { Footer } from '../components/footer.js';
+
+type RootLayoutProps = { children: ReactNode };
+
+export const RootLayout = async ({ children }: RootLayoutProps) => {
+  const data = await getData();
+
+  return (
+    <div id="__waku" className="font-['Nunito']">
+      <meta property="description" content={data.description} />
+      <link rel="icon" type="image/png" href={data.icon} />
+      <Header />
+      <main className="flex min-h-svh items-center justify-center *:min-h-64 *:min-w-64">
+        {children}
+      </main>
+      <Footer />
+    </div>
+  );
+};
+
+const getData = async () => {
+  const data = {
+    description: 'An internet website!',
+    icon: '/images/favicon.png',
+  };
+
+  return data;
+};

package/template/14_react-tweet/tailwind.config.js

@@ -0,0 +1,4 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+};

package/template/14_react-tweet/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "target": "esnext",
+    "downlevelIteration": true,
+    "esModuleInterop": true,
+    "module": "nodenext",
+    "skipLibCheck": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "types": ["react/experimental"],
+    "jsx": "react-jsx",
+    "paths": {
+      "~/*": ["./src/*"]
+    }
+  }
+}

package/template/14_react-tweet/vite.config.ts

@@ -0,0 +1,15 @@
+/** @type {import('vite').UserConfig} */
+export default ({ mode }: { mode: string }) => ({
+  ...(mode === 'development' && {
+    optimizeDeps: {
+      include: [
+        'react-dom/client',
+        'react-tweet > use-sync-external-store/shim/index.js',
+        'react-tweet > date-fns/format/index.js',
+      ],
+    },
+    ssr: {
+      noExternal: ['react-tweet'],
+    },
+  }),
+});

package/template/10_dynamicroute/vite.config.ts

@@ -1,20 +0,0 @@
-import { fileURLToPath } from 'node:url';
-import path from 'node:path';
-import { glob } from 'glob';
-
-const rootDir = path.join(path.dirname(fileURLToPath(import.meta.url)), 'src');
-const routeFiles = glob.sync('routes/**/*.{tsx,js}', { cwd: rootDir });
-
-/** @type {import('vite').UserConfig} */
-export default {
-  build: {
-    rollupOptions: {
-      input: Object.fromEntries(
-        routeFiles.map((fname) => [
-          fname.replace(/\.\w+$/, ''),
-          path.join(rootDir, fname),
-        ]),
-      ),
-    },
-  },
-};