duto 0.260915.0 → 0.261011.0

package/README.md

@@ -1,5 +1,5 @@
 <h1 align="left">
-  🛢 Duto &nbsp;
+  ⛳️ Duto &nbsp;
   <a href="https://npmjs.com/package/duto"><img  src="https://img.shields.io/npm/v/duto.svg" alt="npm package"></a>
   <br/>
   <a href="https://pr.new/attla/duto"><img align="right" src="https://developer.stackblitz.com/img/start_pr_dark_small.svg" alt="Start new PR in StackBlitz Codeflow"></a>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "duto",
   "description": "All-in-one serverless framework for web artisans",
-  "version": "0.260915.0",
+  "version": "0.261011.0",
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.d.ts",

package/src/commands/new.ts

@@ -1,7 +1,7 @@
-import { basename, join, relative, resolve } from 'pathe'
+import { basename, join, resolve } from 'pathe'
 import { command } from 't0n/cli'
-import { bold, dim, green, red } from 't0n/color'
-import { event, error, step, log, rn } from 't0n/log'
+import { bold, dim, red } from 't0n/color'
+import { event, step, rn } from 't0n/log'
 import { _root } from '@/utils'
 
 import { copyFileSync, existsSync, mkdirSync, readdirSync, readFileSync, statSync, writeFileSync } from 'node:fs'
@@ -11,6 +11,7 @@ import select from '@inquirer/select'
 import { createSpinner } from 'nanospinner'
 import { exit } from 'node:process'
 
+const types = ['pages', 'server']
 const templates = [
   'aws',
   'workerd',
@@ -63,6 +64,11 @@ export default command({
       type: 'boolean',
       default: false,
     },
+    type: {
+      description: 'Project type',
+      type: 'enum',
+      options: types,
+    },
     template: {
 			alias: 't',
       description: 'Template to use',
@@ -71,61 +77,80 @@ export default command({
     },
   },
 	async run({ args }) { // @ts-ignore
-    const root = process.cwd() || process.env?.PWD || process.stdin?.path
     let dir = args._[0]
     if (dir) {
       step(bold('Using target directory: '+ dim('/'+ dir.replace(/^\//, ''))))
     } else {
-      dir = await input({ message: 'Target directory', default: root })
-      if (!dir.startsWith(root))
-        dir = join(root, dir)
+      dir = await input({ message: 'Target directory', default: _root })
+      if (!dir.startsWith(_root))
+        dir = join(_root, dir)
     }
 
-    const name = basename(/^(\.\/|\.\\|\.)$/.test(dir) ? root : dir)
-    const template = args.template || (await select({
+    const type = args.type || (await select({
       loop: true,
-      message: 'Which template do you want to use?',
-      choices: templates.map(v => ({ title: v, value: v})),
-      default: 'workerd',
+      message: 'Which type of project is it?',
+      choices: types.map(v => ({ title: v, value: v})),
     }))
 
-    if (!template)
-      throw new Error('No template selected')
+    if (!type)
+      throw new Error('No type selected')
+    if (!types.includes(type))
+      throw new Error(`Invalid type selected: ${type}`)
+
+    const dirs = [type === 'server' ? 'base' : '']
+    const name = basename(/^(\.\/|\.\\|\.)$/.test(dir) ? _root : dir)
+
+    if (type === 'server') {
+      const template = args.template || (await select({
+        loop: true,
+        message: 'Which template do you want to use?',
+        choices: templates.map(v => ({ title: v, value: v})),
+        default: 'workerd',
+      }))
 
-    if (!templates.includes(template))
-      throw new Error(`Invalid template selected: ${template}`)
+      if (!template)
+        throw new Error('No template selected')
+      if (!templates.includes(template))
+        throw new Error(`Invalid template selected: ${template}`)
 
-    if (existsSync(dir) && readdirSync(dir).length > 0) {
-      const response = await confirm({ message: 'Directory not empty. Continue?', default: false })
-      if (!response) process.exit(1)
+      dirs.push(template)
+    }
+
+    if (
+      existsSync(dir) && readdirSync(dir).length > 0
+      && !(await confirm({ message: 'Directory not empty. Continue?', default: false }))
+    ) {
+      process.exit(1)
     } else {
       mkdirp(dir)
     }
 
-    const spinner = createSpinner('Cloning the template').start()
-    for (const t of ['base', template]) {
-      const templateDir = resolve(import.meta.dir, './templates/'+ t)
+    const spinner = createSpinner('Cloning project..').start()
+    for (const d of dirs) {
+      const templateDir = resolve(import.meta.dir, `./templates/${type}/`+ d)
       const files = readdirSync(templateDir)
-      for (const file of files.filter(f => f !== 'package.json'))
+      for (const file of files)
         copy(join(templateDir, file), join(dir, renameFiles[file] ?? file))
     }
 
-    spinner.success()
+    spinner.success(bold('Cloned project'))
 
-    const pkgPath = resolve(__dirname, `./templates/base/package.json`)
+    const pkgPath = join(dir, 'package.json')
     if (existsSync(pkgPath)) {
       const pkg = JSON.parse(readFileSync(pkgPath, 'utf-8'))
       pkg.name = name
       writeFileSync(join(dir, 'package.json'), JSON.stringify(pkg, null, 2))
     }
 
-    if (args?.install) {
+
+    const install = args.install || (await confirm({ message: 'Install dependencies?', default: false }))
+    if (install) {
       const spinner2 = createSpinner('Installing project dependencies').start()
       const proc = Bun.spawn(['bun', 'i'], { stdout: 'ignore', stderr: 'inherit' })
       const procExit = await proc.exited
 
       if (procExit === 0) {
-        spinner2.success()
+        spinner2.success(bold('Installed dependencies'))
       } else {
         spinner2.stop({
           mark: red('×'),
@@ -135,12 +160,12 @@ export default command({
       }
     }
 
-    event('New project successfully created')
-    if (dir != root) {
+    event(bold('Project successfully created'))
+    if (dir != _root) {
       rn()
       console.log(
         dim('Get started with:'),
-        bold(`cd ${name}`),
+        bold(`cd ${name} && duto dev`),
       )
     }
 	},

package/src/commands/templates/pages/README.md

@@ -0,0 +1,21 @@
+# Duto Pages - Starter Template
+
+This template should help get you started developing.
+
+## Install dependencies
+
+To install, run:
+
+```bash
+bun i
+```
+
+## Development environment
+
+Test the application locally in an environment identical to production using the command:
+
+```bash
+duto dev
+```
+
+[Read the Full Docs to Learn More](https://hub.bi/docs/duto)

package/src/commands/templates/pages/_gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

package/src/commands/templates/pages/components/html.tsx

@@ -0,0 +1,55 @@
+import { t } from 'duto'
+
+export type Props = {
+  children?: preact.ComponentChildren
+  class?: string
+
+	locale?: string
+  name?: string
+  title: string
+  description?: string
+}
+
+export function Html({
+  children,
+  class: className,
+
+	locale = 'en',
+	name = 'Duto',
+	title,
+	description = '',
+  ...props
+}: Props) {
+  const _class = [
+    'bg-gradient-to-br from-zinc-200 to-zinc-150 dark:from-zinc-800 dark:to-zinc-950 text-gray-600 dark:text-gray-300',
+    className,
+  ].filter(Boolean).join(' ')
+
+  const _title = [name, t(title ?? '')].filter(Boolean).join(' › ')
+  const _description = t(description || title || '')
+
+  return (
+    <html class={_class} {...props}>
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+        <link rel="icon" type="image/x-icon" sizes="48x48" href="/favicon.ico" />
+        <link rel="icon" type="image/svg+xml" sizes="any" href="/favicon.svg" />
+        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+
+        <meta name="theme-color" content="#FFFFFF" media="(prefers-color-scheme: light)" />
+        <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)" />
+
+        {/* <link rel="sitemap" href="/sitemap-index.xml" /> */}
+
+        <title dangerouslySetInnerHTML={{ __html: _title }} />
+        {_description && <meta name="description" content={_description} />}
+      </head>
+
+      <body class="flex flex-col min-h-svh max-w-screen overflow-x-clip relative z-10 ">
+        {children}
+      </body>
+    </html>
+  )
+}

package/src/commands/templates/pages/components/locale-select.tsx

@@ -0,0 +1,59 @@
+import { useSignal } from '@preact/signals'
+import { options } from '@/i18n'
+import { local, getLocale, setLocale, isPrefixed, r } from 'duto'
+import { useLayoutEffect } from 'preact/hooks'
+
+import Select from './select'
+
+function Languages(props: any) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={[props.class || '', props.className || ''].filter(Boolean).join(' ')}><path d="m5 8 6 6" /><path d="m4 14 6-6 2-3" /><path d="M2 5h12" /><path d="M7 2h1" /><path d="m22 22-5-10-5 10" /><path d="M14 18h6" /></svg>
+  )
+}
+export default function LocaleSelect({ class: className = '' }) {
+  const localeOptions = Object.entries(options).map(([value, label]) => ({ label, value }))
+  const selectedValue = useSignal(getLocale())
+  let unsubscribe: (() => void) | null = null
+  const handle = (e: any, lang?: string) => {
+    lang ??= getLocale()
+    selectedValue.value = lang
+  }
+
+  useLayoutEffect(() => {
+    unsubscribe = local.subscribe('lang', e => !isPrefixed() && handle(null, e.val as string))
+    const lang = getLocale()
+    selectedValue.value = lang
+
+    window.addEventListener('popstate', handle)
+    return () => {
+      window.removeEventListener('popstate', handle)
+      unsubscribe?.()
+    }
+  }, [])
+
+  const handleChange = async (e: Event) => {
+    const target = e.target as HTMLSelectElement
+    if (target) {
+      await setLocale(target.value)
+      selectedValue.value = target.value
+      isPrefixed() && r((window?.location?.pathname || '').split('/').filter(Boolean).slice(1).join('/'), target.value)
+    }
+  }
+
+  const containerClasses = [
+    'locale-select overflow-hidden text-ellipsis p-1 rounded-lg hover:bg-neutral-200 hover:text-zinc-900',
+    className
+  ].filter(Boolean).join(' ')
+
+  return (
+    <Select
+      Icon={Languages}
+      options={localeOptions}
+      value={selectedValue.value}
+      class={'outline-none text-ellipsis absolute inset-0 opacity-0 cursor-pointer' + className}
+      containerClass={containerClasses}
+      id="locale-select"
+      onchange={handleChange}
+    />
+  )
+}

package/src/commands/templates/pages/components/select.tsx

@@ -0,0 +1,95 @@
+import { forwardRef } from 'preact/compat'
+
+type OptionObject = {
+  label: string
+  value: string
+}
+
+type Option =
+  | OptionObject
+  | [value: string, label: string]
+
+type Props = {
+  placeholder?: string,
+  value?: string,
+  Icon?: any,
+  // icon?: string,
+  id?: string,
+  class?: string,
+  containerClass?: string,
+  options: Record<string, Option[]> | Option[],
+  onchange?: (e: Event) => void,
+  onclick?: (e: Event) => void,
+  required?: boolean,
+  ref?: (el: HTMLSelectElement | null) => void,
+}
+
+function renderOption(op: Option, value: string) {
+  if (Array.isArray(op)) {
+    const [val, label] = op
+    return <option key={val} value={val}>{label}</option>
+  }
+
+  return <option key={op.value} value={op.value}>{op.label}</option>
+}
+
+export default forwardRef<HTMLSelectElement, Props>(function Select({
+  placeholder,
+  value = '',
+  Icon,
+  id,
+  class: className,
+  containerClass,
+  options,
+  ...props
+}, ref) {
+
+  return (
+    <label
+      htmlFor={id}
+      class={[
+        'relative inline-flex items-center cursor-pointer select',
+        containerClass,
+      ].filter(Boolean).join(' ')}
+    >
+      {Icon && <Icon class="size-6 shrink-0" />}
+      {/* {icon && (
+        <Icon
+          name={icon}
+          class="icon label-icon pointer-events-none"
+        />
+      )} */}
+
+      <select
+        ref={ref}
+        id={id}
+        value={value}
+        autocomplete="off"
+        class={className}
+        {...props}
+      >
+        {placeholder && (
+          <option disabled value="">{placeholder}</option>
+        )}
+
+        {Array.isArray(options)
+          ? options.map(op => renderOption(op, value))
+          : Object.entries(options).map(([label, opts]) => (
+              <optgroup
+                key={label}
+                label={label}
+              >
+                {opts.map(op => renderOption(op, value))}
+              </optgroup>
+            ))}
+      </select>
+
+      {/* <Icon
+        name="lucide:chevron-down"
+        class="icon caret"
+        style="scale:115% 115%"
+      /> */}
+    </label>
+  )
+})
+

package/src/commands/templates/pages/components/theme-select.tsx

@@ -0,0 +1,60 @@
+import { useSignal } from '@preact/signals'
+import { useLayoutEffect } from 'preact/hooks'
+import { t, getTheme, setTheme, onThemeChange } from 'duto'
+
+import Select from './select'
+
+function ThemeIcon(props: any) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={[props.class || '', props.className || ''].filter(Boolean).join(' ')}><path d="M11 17a4 4 0 0 1-8 0V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2Z"/><path d="M16.7 13H19a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H7"/><path d="M 7 17h.01"/><path d="m11 8 2.3-2.3a2.4 2.4 0 0 1 3.404.004L18.6 7.6a2.4 2.4 0 0 1 .026 3.434L9.9 19.8"/></svg>
+  )
+}
+
+export default function ThemeSelect({ class: className = '' }) {
+  const options = [['auto', t`auto`], ['dark', t`dark`], ['light', t`light`]].map(([value, label]) => ({ value, label, selected: false }))
+  const selectedValue = useSignal(getTheme())
+  let unsubscribe: (() => void)[] = []
+  const handle = (e: any, theme?: string) => {
+    theme ??= getTheme()
+    selectedValue.value = theme
+  }
+
+  useLayoutEffect(() => {
+    unsubscribe = onThemeChange(handle)
+    selectedValue.value = getTheme()
+
+    window.addEventListener('popstate', handle)
+    return () => {
+      window.removeEventListener('popstate', handle)
+      unsubscribe.forEach(unsub => unsub?.())
+    }
+  }, [])
+
+  const handleChange = async (e: Event) => {
+    const target = e.target as HTMLSelectElement
+    if (target) {
+      setTheme(target.value)
+      selectedValue.value = target.value
+    }
+  }
+
+  const containerClasses = [
+    'locale-select overflow-hidden text-ellipsis p-1 rounded-lg hover:bg-neutral-200 hover:text-zinc-900',
+    className,
+  ].filter(Boolean).join(' ')
+
+  return (
+    <Select
+      Icon={ThemeIcon}
+      options={options}
+      value={selectedValue.value}
+      width="6.25em"
+      class="theme-select outline-none text-ellipsis absolute inset-0 opacity-0 cursor-pointer"
+      containerClass={containerClasses}
+      id="theme-select"
+      onchange={handleChange}
+      width="6.25em"
+      id="theme-select"
+    />
+  )
+}

package/src/commands/templates/pages/i18n/en.ts

@@ -0,0 +1,23 @@
+export default {
+  routes: {
+    about: 'about',
+    shop: 'shop',
+    notfound: 'not-found',
+  },
+  messages: {
+    auto: 'System default',
+    dark: 'Dark theme',
+    light: 'Light theme',
+    title: 'Welcome to Duto',
+    description: 'A fast, lightweight framework that keeps things simple!',
+    gotodocs: 'Go to docs',
+    notfound: 'Page not found',
+    sorry404: 'Sorry, the page you are looking for does not exist.',
+    backhome: 'Back to homepage',
+    about: 'About',
+    shop: 'Shop',
+
+    blog: 'Blog',
+    b1: 'This page is also static, the data was loaded via',
+  },
+}

package/src/commands/templates/pages/i18n/index.ts

@@ -0,0 +1,19 @@
+export const fallbackLocale = 'pt-br'
+export const locales = ['en', 'pt-br']
+
+export const options = {
+  en: 'English',
+  'pt-br': 'Português (Brasil)',
+  // de: 'Deutsch',
+  // es: 'Español',
+  // 'zh-cn': '简体中文',
+  // 'zh-tw': '正體中文',
+  // fr: 'Français',
+  // hi: 'हिन्दी',
+  // ar: 'العربية',
+  // ja: '日本語',
+  // ko: '한국어',
+  // pl: 'Polski',
+  // ru: 'Русский',
+  // it: 'Italiano',
+}

package/src/commands/templates/pages/i18n/pt-br.ts

@@ -0,0 +1,23 @@
+export default {
+  routes: {
+    about: 'sobre',
+    shop: 'loja',
+    notfound: 'pagina-desconhecida',
+  },
+  messages: {
+    auto: 'Padrão do sistema',
+    dark: 'Escuro',
+    light: 'Claro',
+    title: 'Bem-vindo ao Duto',
+    description: 'Um framework rápido e leve que mantém as coisas simples!',
+    gotodocs: 'Documentação',
+    notfound: 'Página não encontrada',
+    sorry404: 'Esta página pode ter sido excluída ou movida...',
+    backhome: 'Ir para página inicial',
+    about: 'Sobre',
+    shop: 'Loja',
+
+    blog: 'Blog',
+    b1: 'Esta página também é estática, os dados foram carregados via',
+  },
+}

package/src/commands/templates/pages/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "duto-docs",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "duto": "workspace:*",
+    "@preact/signals": "catalog:",
+    "preact": "catalog:"
+  },
+  "devDependencies": {
+    "bun-types": "catalog:",
+    "tailwindcss": "catalog:",
+    "typescript": "catalog:"
+  },
+  "duto": {
+    "type": "pages",
+    "platform": "workerd",
+    "dev": {
+      "port": 3000
+    }
+  }
+}

package/src/commands/templates/pages/pages/404.tsx

@@ -0,0 +1,12 @@
+import { t, Link } from 'duto'
+
+export default function NotFound() {
+  return (
+    <div class="flex flex-col items-center justify-center text-center w-full text-lg py-16">
+      <h1 class="text-sky-gradient font-mono text-7xl lg:text-8xl">404</h1>
+      <p class="body-large mb-2 mt-4 text-3xl lg:text-4xl">{t`notfound`}</p>
+      <p class="body lg:body-large">{t`sorry404`}</p>
+      <Link to="/" class="border-b border-current mt-8">{t`backhome`}</Link>
+    </div>
+  )
+}

package/src/commands/templates/pages/pages/blog/[slug].tsx

@@ -0,0 +1,88 @@
+
+import { t, Link } from 'duto'
+import type { Post, Posts } from '@/types'
+import { JSJSON } from '../../../../packages/t0n/src/json'
+import NotFound from '../404'
+
+// Mock data
+const ALL_POSTS: Posts = [
+  {
+    id: "hello-world",
+    title: "Hello World",
+    body:
+      "Welcome to my blog! This post was statically generated at build time using `getStaticProps`. When navigating here via the SPA router, `getProps` fetches the same data dynamically.",
+  },
+  {
+    id: "getting-started",
+    title: "Getting Started with SSG",
+    body:
+      "Static site generation combines the best of both worlds: fast initial loads with the flexibility of dynamic data fetching.",
+  },
+  {
+    id: "signals-islands",
+    title: "Signals & Islands",
+    body:
+      "Preact Signals give us fine-grained reactivity. Combined with the islands architecture, we can ship near-zero JS by default.",
+  },
+]
+
+
+export { Html } from '@/components/html'
+
+/**
+ * Returns one entry per post.
+ * Each entry MUST include the route param (`slug`) plus any page props.
+ * The build script uses `slug` to compute the output path.
+ */
+export function getStaticProps() {
+  return ALL_POSTS.map((post) => ({
+    slug: post.id, // required: matches [slug] in the filename
+    post,
+  }))
+}
+
+// ── Browser-time data ─────────────────────────────────────────────────────────
+
+/**
+ * Called during SPA navigation. Receives route params from wouter.
+ */
+export async function getProps({ slug }: { slug?: string }) {
+  const post = (await (await fetch('https://jsonplaceholder.typicode.com/posts/'+ slug)).json())
+  return { post }
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+type Props = {
+  post?: Post | null,
+  slug?: string,
+}
+
+export default function BlogPost({ post, slug }: Props) {
+  if (!post?.title)
+    return <NotFound />
+
+  return (
+    <>
+      <article class="mt-6 max-w-2xl">
+        <div>
+          <Link href="/blog">
+            ←
+            <span class="ml-2">{t`blog`}</span>
+          </Link>
+        </div>
+        <h1 class="mt-2 text-4xl font-black text-sky-gradient">{post.title}</h1>
+        <p class="mt-6 leading-relaxed">{post.body}</p>
+      </article>
+
+      <div class="mt-12 p-4 rounded-lg text-sm bg-sky-50 text-sky-700 dark:bg-zinc-700 dark:text-white/80">
+        {[
+          ['Route', window.$duto?.route?.pattern],
+          ['Route path', window.$duto?.route?.path],
+          ['Route params', JSJSON(window?.$duto?.route?.params || {})],
+          ['Route search params', window?.$duto?.search?.toString()],
+        ].map(([label, info]) => ( <div><b>{label}:</b> {info || 'n/a'}</div>))}
+      </div>
+    </>
+  )
+}