duto 0.260915.0 → 0.261001.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.261001.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/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/i18n/en.ts

@@ -0,0 +1,17 @@
+export default {
+  routes: {
+    about: 'about',
+    shop: 'shop',
+    notfound: 'not-found',
+  },
+  messages: {
+    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',
+  },
+}

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,17 @@
+export default {
+  routes: {
+    about: 'sobre',
+    shop: 'loja',
+    notfound: 'pagina-desconhecida',
+  },
+  messages: {
+    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',
+  },
+}

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-gratient text-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/index.tsx

@@ -0,0 +1,16 @@
+import { t, Link } from 'duto'
+
+export default function Index() {
+  return (
+    <div class="relative">
+      <h1 class="title text-sky-gratient mt-10 lg:mt-2">{t`title`}</h1>
+      <p class="sub-title">{t`description`}</p>
+      <div class="flex flex-row gap-8 mt-10">
+
+        <Link href="https://hub.bi/docs/duto" class="group inline-flex shrink-0 items-center justify-center leading-6 font-medium select-none focus:outline-0 gap-2 px-4 py-2.5 text-base rounded-lg bg-white hover:bg-neutral-200 border border-gray-700 text-zinc-900">
+          {t`gotodocs`}<span class="ml-0.5 inline-block transition-transform group-hover:translate-x-1">→</span>
+        </Link>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,24 @@
+import type { ComponentChildren } from 'preact'
+
+import LocaleSelect from '@/components/locale-select'
+
+export default function Layout({ children }: { children: ComponentChildren }) {
+  return (
+    <div class="relative w-full max-w-full min-h-svh overflow-hidden flex flex-col flex-1 justify-center items-center bg-gradient-to-br from-zinc-800 to-zinc-950 text-gray-300 select-none">
+      <div class='absolute top-10 right-10'>
+        <LocaleSelect />
+      </div>
+
+      <main class="flex justify-center items-center px-6 py-16 min-h-[calc(100vh-3.75rem)]" children={children} />
+
+      <footer class="py-[1.1rem] relative text-base lex flex-row items-center mx-auto">
+        <a href="https://hub.bi?ref=duto" class="no-underline group flex items-center justify-center" target="_blank" rel="noopener noreferrer">
+          Powered by
+          <span class="group-hover:underline flex items-center">
+            <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 20 20" aria-hidden="true" class="mx-1 text-xl" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16.555 5.412a8.028 8.028 0 0 0-3.503-2.81 14.899 14.899 0 0 1 1.663 4.472 8.547 8.547 0 0 0 1.84-1.662ZM13.326 7.825a13.43 13.43 0 0 0-2.413-5.773 8.087 8.087 0 0 0-1.826 0 13.43 13.43 0 0 0-2.413 5.773A8.473 8.473 0 0 0 10 8.5c1.18 0 2.304-.24 3.326-.675ZM6.514 9.376A9.98 9.98 0 0 0 10 10c1.226 0 2.4-.22 3.486-.624a13.54 13.54 0 0 1-.351 3.759A13.54 13.54 0 0 1 10 13.5c-1.079 0-2.128-.127-3.134-.366a13.538 13.538 0 0 1-.352-3.758ZM5.285 7.074a14.9 14.9 0 0 1 1.663-4.471 8.028 8.028 0 0 0-3.503 2.81c.529.638 1.149 1.199 1.84 1.66ZM17.334 6.798a7.973 7.973 0 0 1 .614 4.115 13.47 13.47 0 0 1-3.178 1.72 15.093 15.093 0 0 0 .174-3.939 10.043 10.043 0 0 0 2.39-1.896ZM2.666 6.798a10.042 10.042 0 0 0 2.39 1.896 15.196 15.196 0 0 0 .174 3.94 13.472 13.472 0 0 1-3.178-1.72 7.973 7.973 0 0 1 .615-4.115ZM10 15c.898 0 1.778-.079 2.633-.23a13.473 13.473 0 0 1-1.72 3.178 8.099 8.099 0 0 1-1.826 0 13.47 13.47 0 0 1-1.72-3.178c.855.151 1.735.23 2.633.23ZM14.357 14.357a14.912 14.912 0 0 1-1.305 3.04 8.027 8.027 0 0 0 4.345-4.345c-.953.542-1.971.981-3.04 1.305ZM6.948 17.397a8.027 8.027 0 0 1-4.345-4.345c.953.542 1.971.981 3.04 1.305a14.912 14.912 0 0 0 1.305 3.04Z"></path></svg>
+            HUB</span>
+        </a>
+      </footer>
+    </div>
+  )
+}

package/src/commands/templates/pages/style.css

@@ -0,0 +1,24 @@
+@import "tailwindcss";
+
+html, body {
+  @apply overscroll-none
+}
+
+.text-mono {
+  font-family: ui-monospace,SFMono-Regular,monospace;
+  --tw-font-weight: 300;
+  font-weight: 300
+}
+
+.text-sky-gratient {
+  @apply bg-clip-text text-transparent;
+  background-image: radial-gradient(138.06% 1036.51% at 95.25% -2.54%, rgb(112, 209, 255) 14.06%, rgb(173, 228, 255) 51.02%, rgb(219, 243, 255) 79.09%);
+}
+
+.title {
+  @apply text-4xl lg:text-[3.5rem] leading-[1.1] font-semibold tracking-tight text-balance
+}
+
+.sub-title {
+  @apply mt-4 max-w-[60ch] text-lg text-balance md:mt-6 md:text-xl
+}

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

@@ -0,0 +1,54 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "types": ["vite/client", "bun-types", "node"],
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "useDefineForClassFields": true,
+
+    /* Linting */
+    "strict": true,
+    "skipLibCheck": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    "paths": {
+      "react": ["./node_modules/preact/compat/"],
+      "react-dom": ["./node_modules/preact/compat/"],
+      // "@duto/*": ["./@duto/*"],
+      // "duto/*": ["./node_modules/duto/*"],
+      // "~icons/*": ["./@iconify-json/*"],
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "components",
+    "configs",
+    "enums",
+    "libs",
+    "i18n",
+    "pages",
+    "tests/**/*",
+    "utils",
+    "i18n.ts",
+    "i18n.tsx",
+    "config.ts",
+    "types.ts"
+  ],
+  "exclude": [
+    ".duto",
+    "node_modules"
+  ]
+}

package/src/commands/templates/pages/types.ts

@@ -0,0 +1,8 @@
+
+export type Posts = Post[]
+export type Post = {
+  id: number | string,
+  userid?: string,
+  title: string,
+  body: string,
+}

package/src/commands/templates/server/base/.editorconfig

@@ -0,0 +1,21 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_style = space
+indent_size = 2
+
+# [*.{js,jsx,ts,tsx,json,yaml,yml}]
+# Inherits all settings from [*] and applies to these extensions
+
+[*.{json,jsonc}]
+insert_final_newline = false
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Dockerfile]
+indent_size = 4

package/src/commands/templates/{base → server/base}/README.md

@@ -1,4 +1,4 @@
-# Duto - Starter Template
+# Duto Server - Starter Template
 
 This template should help get you started developing.
 

package/src/pages/cli/commands/dev.ts

@@ -26,20 +26,26 @@ export default command({
 		name: 'dev',
 		description: '🧪  Start dev server\n',
 	}, // @ts-ignore
-	args,
+  args: {
+    ...args,
+		minify: {
+			description: 'Minify the result',
+			type: 'boolean',
+			default: true,
+		},
+  },
   async run({ args }) {
     const config = await getConfig()
     const duto = getEnv('duto', {})
     const desiredPort = Number(args.port || duto?.dev?.port || 3000)
     const host = String(args.host || duto?.dev?.host || 'localhost')
-    // const desiredPort = args.port ? Number(args.port) : (config?.preview?.port ? Number(config.preview.port) : 3000)
-    // const host = args.host ? String(args.host) : (config?.preview?.host ? String(config.preview.host) : 'localhost')
 
+    const minify = args.minify ?? true
     let buildProcess: Bun.Subprocess | null = null
 
     const _build = async () => {
       if (buildProcess) await killProcess(buildProcess)
-      buildProcess = Bun.spawn(['duto', 'build', '--hmr'], {stdin: 'inherit', stdout: 'ignore', stderr: 'inherit'})
+      buildProcess = Bun.spawn(['duto', 'build', '--hmr', minify ? '' : '--no-minify'], {stdin: 'inherit', stdout: 'ignore', stderr: 'inherit'})
 
       try {
         const code = await buildProcess.exited