create-ones-app 0.0.7 → 0.0.8

package/template/example/vite.config.ts

@@ -0,0 +1,286 @@
+/* eslint-disable no-control-regex */
+/* eslint-disable @typescript-eslint/no-floating-promises */
+import { fileURLToPath } from 'node:url'
+import { readFileSync, writeFileSync } from 'node:fs'
+import { dirname, resolve, basename, extname, relative } from 'node:path'
+import fse from 'fs-extra'
+import { glob } from 'glob'
+import { build, defineConfig, mergeConfig } from 'vite'
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
+import type { InlineConfig, UserConfig, ViteDevServer } from 'vite'
+
+const { existsSync, readdirSync, remove, copy } = fse
+
+const backendHostedPort = Number(process.env.ONES_HOSTED_PORT) || 8201
+const webDevPort = Number(process.env.ONES_DEV_WEB_SERVER_PORT) || 8202
+const NODE_ENV = process.env.NODE_ENV === 'development' ? 'development' : 'production'
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+const distDir = resolve(__dirname, 'dist')
+const distWebDir = resolve(distDir, 'web')
+const distPublicDir = resolve(distDir, 'public')
+
+const webDir = resolve(__dirname, 'web')
+const publicDir = resolve(__dirname, 'public')
+const viteDir = resolve(__dirname, '.vite')
+
+const sleep = (number: number) => {
+  return new Promise((resolve) => {
+    setTimeout(resolve, number)
+  })
+}
+
+const defaultConfig: InlineConfig = {
+  root: __dirname,
+  configFile: false,
+  build: {
+    lib: {
+      entry: '',
+      name: '',
+      fileName: '',
+      formats: ['iife'],
+    },
+    emptyOutDir: false,
+    copyPublicDir: false,
+    // Image assets under 128KB are inlined by default
+    // External assets must be placed in the public directory and referenced by URL
+    assetsInlineLimit: 128 * 1024,
+  },
+  resolve: {
+    alias: {
+      '@': webDir,
+    },
+  },
+  define: {
+    'process.env.NODE_ENV': JSON.stringify(NODE_ENV),
+  },
+  plugins: [cssInjectedByJsPlugin() as InlineConfig['plugins']],
+}
+
+const devConfig: UserConfig = {
+  build: {
+    outDir: viteDir,
+    minify: false,
+    sourcemap: true,
+  },
+  esbuild: {
+    keepNames: true,
+  },
+}
+
+const prodConfig: UserConfig = {
+  mode: 'production',
+  build: {
+    outDir: distWebDir,
+  },
+}
+
+const buildJS = async (filename: string) => {
+  const appConfig: UserConfig = {
+    build: {
+      lib: {
+        name: 'index',
+        entry: resolve(webDir, `pages/${filename}/index.tsx`),
+        fileName: () => `pages/${filename}.js`,
+      },
+    },
+  }
+  const envConfig = NODE_ENV === 'development' ? devConfig : prodConfig
+  return await build(mergeConfig(defaultConfig, mergeConfig(envConfig, appConfig)))
+}
+
+const htmlTemplate = readFileSync(resolve(__dirname, 'web/template/index.html'), {
+  encoding: 'utf-8',
+})
+
+const createdHTML = (...scripts: string[]) => {
+  return htmlTemplate.replace('<!-- SCRIPT -->', scripts.join('\n'))
+}
+
+const messagePlugin = () => {
+  return {
+    name: 'message-plugin',
+    configureServer(server: ViteDevServer) {
+      server.printUrls = () => {
+        const base = `http://localhost:${backendHostedPort}`
+        sleep(2000).then(() => {
+          glob(resolve(webDir, 'pages/**/index.tsx')).then((entryFiles) => {
+            for (const entryFile of entryFiles) {
+              const entryName = basename(dirname(entryFile))
+              console.log(`Entry "${entryName}" URL: ${base}/web/pages/${entryName}.html`)
+            }
+          })
+        })
+      }
+    },
+  }
+}
+
+const devPlugin = () => {
+  const codeMap: Record<string, string> = {}
+  const visitMap: Record<string, boolean> = {}
+  const counterMap: Record<string, number> = {}
+  const timerMap: Record<string, ReturnType<typeof setTimeout>> = {}
+  const htmlType = 'text/html; charset=utf-8'
+  const plainType = 'text/plain; charset=utf-8'
+  const jsType = 'application/javascript; charset=utf-8'
+  const jsonType = 'application/json; charset=utf-8'
+  const debounceTime = 300
+  return {
+    name: 'dev-plugin',
+    configureServer(server: ViteDevServer) {
+      server.watcher.on('add', (path) => {
+        if (!path.startsWith(webDir)) return
+        const rel = relative(webDir, path).replace(/\\/g, '/')
+        const match = rel.match(/^pages\/([^/]+)\/index\.tsx$/)
+        if (match) {
+          const entryName = match[1]
+          const base = `http://localhost:${backendHostedPort}`
+          console.log(
+            `Entry "${entryName}" created successfully: ${base}/web/pages/${entryName}.html`,
+          )
+        }
+      })
+      server.watcher.on('change', (path) => {
+        if (!path.startsWith(webDir)) return
+        const rel = relative(webDir, path).replace(/\\/g, '/')
+        const match = rel.match(/^pages\/([^/]+)\//)
+        if (match) {
+          const entryName = match[1]
+          const hasVisit = visitMap[entryName]
+          if (hasVisit) {
+            if (timerMap[entryName]) clearTimeout(timerMap[entryName])
+            timerMap[entryName] = setTimeout(() => {
+              const invoke = async () => {
+                try {
+                  codeMap[entryName] = ''
+                  console.log(`Entry "${entryName}" recompiling...`)
+                  await buildJS(entryName)
+                  console.log(`Entry "${entryName}" compiled successfully`)
+                  const js = readFileSync(resolve(viteDir, `pages/${entryName}.js`), {
+                    encoding: 'utf-8',
+                  })
+                  codeMap[entryName] = js
+                  counterMap[entryName] = counterMap[entryName] || 0
+                  counterMap[entryName] += 1
+                } catch (err) {
+                  console.log(`Entry "${entryName}" compiled failed`)
+                  const error = err as Error
+                  console.log(error)
+                }
+              }
+              invoke()
+            }, debounceTime)
+          }
+        }
+      })
+      server.middlewares.use((req, res) => {
+        const invoke = async () => {
+          const pathString = req.url?.split('?')[0] ?? ''
+          const trimString = pathString.replace(/^\//, '')
+          const firstString = trimString.split('/')[0] ?? ''
+          const ext = extname(firstString)
+          if (ext === '.html' || ext === '.js') {
+            const filename = firstString.replace(ext, '')
+            const entry = resolve(webDir, `pages/${filename}/index.tsx`)
+            const exists = existsSync(entry)
+            if (exists) {
+              visitMap[filename] = true
+              if (ext === '.html') {
+                res.statusCode = 200
+                res.setHeader('Content-Type', htmlType)
+                res.end(createdHTML(`<script src="./${filename}.js"></script>`))
+                return
+              }
+              if (codeMap[filename]) {
+                console.log(`Entry "${filename}" using cached code`)
+                res.setHeader('Content-Type', jsType)
+                res.statusCode = 200
+                res.end(codeMap[filename])
+                return
+              }
+              try {
+                console.log(`Entry "${filename}" compiling...`)
+                await buildJS(filename)
+                console.log(`Entry "${filename}" compiled successfully`)
+                const js = readFileSync(resolve(viteDir, `pages/${filename}.js`), {
+                  encoding: 'utf-8',
+                })
+                codeMap[filename] = js
+                counterMap[filename] = counterMap[filename] || 0
+                counterMap[filename] += 1
+                res.setHeader('Content-Type', jsType)
+                res.statusCode = 200
+                res.end(js)
+              } catch (err) {
+                console.log(`Entry "${filename}" compiled failed`)
+                const error = err as Error
+                console.log(error)
+                res.statusCode = 200
+                res.setHeader('Content-Type', jsType)
+                const string = error.stack?.replace(/\u001b\[[0-9;]*[a-zA-Z]/g, '') ?? ''
+                const message = '`' + string + '`'
+                res.end(`console.error(${message})`)
+              }
+              return
+            }
+            res.statusCode = 500
+            res.setHeader('Content-Type', plainType)
+            res.end(`Entry not found, ${entry}`)
+            return
+          }
+          if (/\.js\.map$/.test(firstString)) {
+            const filename = firstString
+            try {
+              const json = readFileSync(resolve(viteDir, `pages/${filename}`), {
+                encoding: 'utf-8',
+              })
+              res.statusCode = 200
+              res.setHeader('Content-Type', jsonType)
+              res.end(json)
+              return
+            } catch (error) {
+              String(error)
+            }
+          }
+          res.statusCode = 500
+          res.setHeader('Content-Type', plainType)
+          res.end('File not found')
+        }
+        invoke()
+      })
+    },
+  }
+}
+
+export default defineConfig(async ({ command }) => {
+  const isDev = command === 'serve'
+  if (isDev) {
+    return {
+      root: __dirname,
+      server: {
+        port: webDevPort,
+      },
+      plugins: [messagePlugin(), devPlugin()],
+    }
+  }
+  const sources = readdirSync(resolve(distDir))
+  for (const source of sources) {
+    if (source === 'backend') continue
+    await remove(resolve(distDir, source))
+  }
+  await copy(publicDir, distPublicDir)
+  const pages = await glob(resolve(webDir, 'pages/**/index.tsx'))
+  for (const page of pages) {
+    const filename = basename(dirname(page))
+    await buildJS(filename)
+    writeFileSync(
+      resolve(distWebDir, `pages/${filename}.html`),
+      createdHTML(`<script src="./${filename}.js"></script>`),
+      {
+        encoding: 'utf-8',
+      },
+    )
+  }
+  process.exit(0)
+})

package/template/example/web/pages/recent-work-items/index.css

@@ -0,0 +1,131 @@
+html,
+body,
+#root {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+body {
+  font-family: "Avenir Next", "Segoe UI", Arial, sans-serif;
+  margin: 0;
+  background: #f5f8ff;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.page {
+  background: linear-gradient(175deg, #2a63f6 0%, #77a2ff 55%, #f5f8ff 100%);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 12px 14px 16px;
+  box-sizing: border-box;
+  min-height: 100%;
+  max-height: 100%;
+  overflow: scroll;
+  width: 100%;
+}
+.card {
+  background: rgba(255, 255, 255, 0.96);
+  border: 1px solid rgba(18, 34, 102, 0.15);
+  border-radius: 16px;
+  padding: 24px;
+  width: min(760px, 100%);
+  box-shadow: 0 14px 34px rgba(12, 26, 84, 0.28);
+}
+.greeting {
+  margin: 0;
+  font-size: 30px;
+  line-height: 1.2;
+  font-weight: 700;
+  color: #0a1f56;
+}
+.subtitle {
+  margin: 8px 0 18px;
+  color: #1d3a8a;
+  font-size: 14px;
+}
+.userInfo {
+  margin: 8px 0 0;
+  color: #1e3a8a;
+  font-size: 13px;
+  font-weight: 600;
+}
+.teamInfo {
+  margin: 8px 0 0;
+  color: #1e3a8a;
+  font-size: 13px;
+  font-weight: 600;
+}
+.row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 14px;
+  flex-wrap: wrap;
+}
+label {
+  color: #1f2937;
+  font-size: 13px;
+  font-weight: 600;
+}
+select {
+  border: 1px solid #b6c6f8;
+  border-radius: 8px;
+  padding: 6px 10px;
+  color: #0f255f;
+  background: #ffffff;
+}
+.filterTag {
+  border: 1px solid #c2d2ff;
+  border-radius: 999px;
+  padding: 5px 10px;
+  font-size: 12px;
+  color: #173b92;
+  background: #eef3ff;
+}
+.tableWrap {
+  border: 1px solid #d4dfff;
+  border-radius: 10px;
+  overflow: hidden;
+  background: #ffffff;
+}
+.itemsTable {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+.itemsTable th {
+  text-align: left;
+  font-size: 12px;
+  color: #26438d;
+  font-weight: 700;
+  padding: 8px 10px;
+  background: #edf3ff;
+  border-bottom: 1px solid #dbe5ff;
+}
+.itemsTable td {
+  padding: 8px 10px;
+  font-size: 12px;
+  color: #233257;
+  border-bottom: 1px solid #edf2ff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.itemsTable tbody tr:last-child td {
+  border-bottom: none;
+}
+.itemsTable .nameCell {
+  font-weight: 600;
+}
+.itemsTable .idCell {
+  color: #3a4a70;
+}
+.empty {
+  margin-top: 10px;
+  color: #475569;
+  font-style: italic;
+}

package/template/example/web/pages/recent-work-items/index.tsx

@@ -0,0 +1,265 @@
+import { useCallback, useEffect, useState } from 'react'
+import ReactDOM from 'react-dom'
+import { ONES } from '@ones-open/web-sdk'
+import './index.css'
+
+type RecentLimit = 5 | 10 | 30
+type Locale = 'zh' | 'en'
+type I18nText = {
+  greeting: string
+  subtitle: string
+  teamLabel: string
+  limitLabel: string
+  filterLabel: string
+  nameLabel: string
+  createTimeLabel: string
+  loading: string
+  empty: string
+  error: string
+  unknownTeam: string
+  idLabel: string
+  untitled: string
+  userLabel: string
+  unknownUser: string
+}
+
+interface RecentWorkItem {
+  workItemId: string
+  title: string
+  createdAt: number
+}
+
+interface RecentWorkItemsResponse {
+  ok?: boolean
+  items?: RecentWorkItem[]
+}
+
+interface TeamDetail {
+  id?: string
+  name?: string
+}
+
+interface TeamListResponse {
+  result?: string
+  data?: {
+    teams?: TeamDetail[]
+  }
+}
+
+const LIMIT_OPTIONS: RecentLimit[] = [5, 10, 30]
+
+const normalizeTimestampMs = (timestamp: number): number => {
+  if (!Number.isFinite(timestamp)) return Number.NaN
+
+  const abs = Math.abs(timestamp)
+  if (abs < 1e11) return timestamp * 1000
+  if (abs < 1e14) return timestamp
+  if (abs < 1e17) return Math.floor(timestamp / 1000)
+  return Math.floor(timestamp / 1_000_000)
+}
+
+const formatCreatedAt = (timestamp: number) => {
+  const date = new Date(normalizeTimestampMs(timestamp))
+  if (Number.isNaN(date.getTime())) return '-'
+  return date.toLocaleString()
+}
+
+const isResponseLike = (value: unknown): value is { json: () => Promise<unknown> } =>
+  typeof value === 'object' && value !== null && 'json' in value && typeof value.json === 'function'
+
+const parseResponse = async <T,>(value: unknown): Promise<T> => {
+  if (isResponseLike(value)) {
+    return ((await value.json()) as T) ?? ({} as T)
+  }
+
+  return value as T
+}
+
+const normalizeLocale = (locale: string): Locale => {
+  const normalized = locale.toLowerCase()
+  if (normalized.startsWith('zh') || normalized.includes('chinese')) {
+    return 'zh'
+  }
+  return 'en'
+}
+
+const fetchLocale = async (): Promise<Locale> => {
+  try {
+    return normalizeLocale(await ONES.getLocale())
+  } catch {
+    return 'en'
+  }
+}
+
+const fetchI18n = async (locale: Locale): Promise<Partial<I18nText>> => {
+  const fetchLocaleData = async (nextLocale: Locale): Promise<Partial<I18nText>> => {
+    const urlCandidates = [`/public/i18n/${nextLocale}.json`]
+
+    try {
+      for (const url of urlCandidates) {
+        const response = await ONES.fetchApp(url)
+        if (response.ok) {
+          return (await response.json()) as Partial<I18nText>
+        }
+      }
+    } catch {
+      console.error(`recent-work-items: error fetching i18n for locale: ${nextLocale}`)
+    }
+
+    return {}
+  }
+
+  const [en, zh] = await Promise.all([fetchLocaleData('en'), fetchLocaleData('zh')])
+  const preferred = locale === 'zh' ? zh : en
+  return { ...en, ...preferred }
+}
+
+const formatI18n = (template: string, payload: Record<string, string | number>): string =>
+  template.replace(/\{\{\s*([a-zA-Z0-9_]+)\s*\}\}|\{([a-zA-Z0-9_]+)\}/g, (_, a, b) => {
+    const key = String(a || b)
+    const value = payload[key]
+    return value === undefined ? '' : String(value)
+  })
+
+const fetchTeamName = async (): Promise<string> => {
+  try {
+    const teamInfo = await ONES.getTeamInfo()
+    const currentTeamId = teamInfo.teamUUID || ''
+    if (!currentTeamId) return ''
+
+    const payload = await parseResponse<TeamListResponse>(
+      await ONES.fetchOpenAPI('/v2/account/teams'),
+    )
+    const teams = payload.data?.teams || []
+    const matched = teams.find((team) => team.id === currentTeamId)
+    return `${matched?.name}(${matched?.id || currentTeamId})`
+  } catch {
+    return ''
+  }
+}
+
+const App = () => {
+  useEffect(() => {
+    const loading = document.querySelector('.ones-app-loading')
+    loading?.remove()
+  }, [])
+
+  const [limit, setLimit] = useState<RecentLimit>(5)
+  const [items, setItems] = useState<RecentWorkItem[]>([])
+  const [text, setText] = useState<Partial<I18nText>>({})
+  const [teamName, setTeamName] = useState<string>('')
+  const [userName, setUserName] = useState<string>('')
+  const [loading, setLoading] = useState<boolean>(false)
+  const [hasError, setHasError] = useState<boolean>(false)
+  const t = (key: keyof I18nText) => text[key] ?? ''
+
+  const fetchItems = useCallback(async (nextLimit: RecentLimit) => {
+    setLoading(true)
+    setHasError(false)
+
+    const url = `/api/recent-work-items?limit=${nextLimit}`
+
+    try {
+      const payload = await parseResponse<RecentWorkItemsResponse>(await ONES.fetchApp(url))
+      setItems(Array.isArray(payload?.items) ? payload.items : [])
+    } catch {
+      setItems([])
+      setHasError(true)
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    void fetchItems(limit)
+  }, [limit, fetchItems])
+
+  useEffect(() => {
+    ONES.getUserInfo()
+      .then((userInfo) => {
+        setUserName(`${userInfo.name}(${userInfo.uuid})`)
+      })
+      .catch((error) => {
+        console.error('ONES.getUserInfo', error)
+      })
+  }, [])
+
+  useEffect(() => {
+    let active = true
+    void (async () => {
+      const [nextLocale, nextTeamName] = await Promise.all([fetchLocale(), fetchTeamName()])
+      const nextI18n = await fetchI18n(nextLocale)
+      if (active) {
+        setTeamName(nextTeamName)
+        setText(nextI18n)
+      }
+    })()
+    return () => {
+      active = false
+    }
+  }, [])
+
+  const displayTeamName = teamName || t('unknownTeam')
+  const displayUserName = userName || t('unknownUser')
+
+  return (
+    <div className="page">
+      <div className="card">
+        <p className="greeting">{t('greeting')}</p>
+        <p className="userInfo">
+          {t('userLabel')}: {displayUserName}
+        </p>
+        <p className="teamInfo">
+          {t('teamLabel')}: {displayTeamName}
+        </p>
+        <p className="subtitle">{t('subtitle')}</p>
+        <div className="row">
+          <label htmlFor="limit">{t('limitLabel')}</label>
+          <select
+            id="limit"
+            value={limit}
+            onChange={(event) => setLimit(Number(event.target.value) as RecentLimit)}
+          >
+            {LIMIT_OPTIONS.map((option) => (
+              <option key={option} value={option}>
+                {option}
+              </option>
+            ))}
+          </select>
+          <span className="filterTag">{formatI18n(t('filterLabel'), { limit })}</span>
+        </div>
+
+        {loading ? <div className="empty">{t('loading')}</div> : null}
+
+        <div className="tableWrap">
+          <table className="itemsTable">
+            <thead>
+              <tr>
+                <th>{t('idLabel')}</th>
+                <th>{t('nameLabel')}</th>
+                <th>{t('createTimeLabel')}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {items.map((item) => (
+                <tr key={`${item.workItemId}-${item.createdAt}`}>
+                  <td className="idCell">{item.workItemId}</td>
+                  <td className="nameCell">{item.title || t('untitled')}</td>
+                  <td>{formatCreatedAt(item.createdAt)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+
+        {!loading && hasError ? <div className="empty">{t('error')}</div> : null}
+        {!loading && !hasError && items.length === 0 ? (
+          <div className="empty">{t('empty')}</div>
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+console.log('render App component')
+ReactDOM.render(<App />, document.getElementById('root'))