acrylblends 0.6.1 → 0.6.3

package/plugins/acryl-router/src/core/helper/css/index.ts

@@ -0,0 +1,262 @@
+/**
+ * @module
+ * css Helper for Acryl.
+ */
+
+import { raw } from '../html/index.ts'
+import { DOM_RENDERER } from '../../jsx/constants.ts'
+import { createCssJsxDomObjects } from '../../jsx/dom/css.ts'
+import { escapeToBuffer } from '../../utils/html.ts'
+import type { HtmlEscapedCallback, HtmlEscapedString } from '../../utils/html.ts'
+import type {
+  ClassNameSlug,
+  CssClassName as CssClassNameCommon,
+  CssVariableType,
+  OnInvalidSlug,
+} from './common.ts'
+import {
+  CLASS_NAME,
+  DEFAULT_STYLE_ID,
+  PSEUDO_GLOBAL_SELECTOR,
+  SELECTOR,
+  SELECTORS,
+  STYLE_STRING,
+  cssCommon,
+  cxCommon,
+  keyframesCommon,
+  viewTransitionCommon,
+} from './common.ts'
+export { rawCssString } from './common.ts'
+export type { ClassNameSlug, OnInvalidSlug } from './common.ts'
+
+type CssClassName = HtmlEscapedString & CssClassNameCommon
+
+type usedClassNameData = [
+  Record<string, string>, // class name to add
+  Record<string, true>, // class name already added
+]
+
+interface CssType {
+  (strings: TemplateStringsArray, ...values: CssVariableType[]): Promise<string>
+}
+
+interface CxType {
+  (
+    ...args: (CssClassName | Promise<string> | string | boolean | null | undefined)[]
+  ): Promise<string>
+}
+
+interface KeyframesType {
+  (strings: TemplateStringsArray, ...values: CssVariableType[]): CssClassNameCommon
+}
+
+interface ViewTransitionType {
+  (strings: TemplateStringsArray, ...values: CssVariableType[]): Promise<string>
+  (content: Promise<string>): Promise<string>
+  (): Promise<string>
+}
+
+interface StyleType {
+  (args?: { children?: Promise<string>; nonce?: string }): HtmlEscapedString
+}
+
+/**
+ * @experimental
+ * `createCssContext` is an experimental feature.
+ * The API might be changed.
+ *
+ * @param options.id - The ID for the style element
+ * @param options.classNameSlug - Optional function to customize generated CSS class names
+ * @param options.onInvalidSlug - Optional callback function called when an invalid slug is returned from ClassNameSlug
+ */
+export const createCssContext = ({
+  id,
+  classNameSlug,
+  onInvalidSlug,
+}: {
+  id: Readonly<string>
+  classNameSlug?: ClassNameSlug
+  onInvalidSlug?: OnInvalidSlug
+}): DefaultContextType => {
+  const [cssJsxDomObject, StyleRenderToDom] = createCssJsxDomObjects({ id })
+
+  const contextMap: WeakMap<object, usedClassNameData> = new WeakMap()
+  const nonceMap: WeakMap<object, string | undefined> = new WeakMap()
+
+  const replaceStyleRe = new RegExp(`(<style id="${id}"(?: nonce="[^"]*")?>.*?)(</style>)`, 's')
+
+  const newCssClassNameObject = (cssClassName: CssClassNameCommon): Promise<string> => {
+    const appendStyle: HtmlEscapedCallback = ({ buffer, context }): Promise<string> | undefined => {
+      const [toAdd, added] = contextMap.get(context) as usedClassNameData
+      const names = Object.keys(toAdd)
+
+      if (!names.length) {
+        return
+      }
+
+      let stylesStr = ''
+      names.forEach((className) => {
+        added[className] = true
+        stylesStr += className.startsWith(PSEUDO_GLOBAL_SELECTOR)
+          ? toAdd[className]
+          : `${className[0] === '@' ? '' : '.'}${className}{${toAdd[className]}}`
+      })
+      contextMap.set(context, [{}, added])
+
+      if (buffer && replaceStyleRe.test(buffer[0])) {
+        buffer[0] = buffer[0].replace(replaceStyleRe, (_, pre, post) => `${pre}${stylesStr}${post}`)
+        return
+      }
+
+      const nonce = nonceMap.get(context)
+      const appendStyleScript = `<script${
+        nonce ? ` nonce="${nonce}"` : ''
+      }>document.querySelector('#${id}').textContent+=${JSON.stringify(stylesStr)}</script>`
+
+      if (buffer) {
+        buffer[0] = `${appendStyleScript}${buffer[0]}`
+        return
+      }
+
+      return Promise.resolve(appendStyleScript)
+    }
+
+    const addClassNameToContext: HtmlEscapedCallback = ({ context }) => {
+      if (!contextMap.has(context)) {
+        contextMap.set(context, [{}, {}])
+      }
+      const [toAdd, added] = contextMap.get(context) as usedClassNameData
+      let allAdded = true
+      if (!added[cssClassName[SELECTOR]]) {
+        allAdded = false
+        toAdd[cssClassName[SELECTOR]] = cssClassName[STYLE_STRING]
+      }
+      cssClassName[SELECTORS].forEach(
+        ({ [CLASS_NAME]: className, [STYLE_STRING]: styleString }) => {
+          if (!added[className]) {
+            allAdded = false
+            toAdd[className] = styleString
+          }
+        }
+      )
+      if (allAdded) {
+        return
+      }
+
+      return Promise.resolve(raw('', [appendStyle]))
+    }
+
+    // external class names from cx() are untrusted but the result is marked isEscaped,
+    // so escape it here. skip the buffer when there is nothing to escape.
+    const rawClassName = cssClassName[CLASS_NAME]
+    let escapedClassName = rawClassName
+    if (/[&<>'"]/.test(rawClassName)) {
+      const escapedBuffer: [string] = ['']
+      escapeToBuffer(rawClassName, escapedBuffer)
+      escapedClassName = escapedBuffer[0]
+    }
+    const className = new String(escapedClassName) as CssClassName
+    Object.assign(className, cssClassName)
+    ;(className as HtmlEscapedString).isEscaped = true
+    ;(className as HtmlEscapedString).callbacks = [addClassNameToContext]
+    const promise = Promise.resolve(className)
+    Object.assign(promise, cssClassName)
+
+    promise.toString = cssJsxDomObject.toString
+    return promise
+  }
+
+  const css: CssType = (strings, ...values) => {
+    return newCssClassNameObject(cssCommon(strings, values, classNameSlug, onInvalidSlug))
+  }
+
+  const cx: CxType = (...args) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    args = cxCommon(args as any) as any
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return css(Array(args.length).fill('') as any, ...args)
+  }
+
+  const keyframes: KeyframesType = (strings, ...values) =>
+    keyframesCommon(strings, values, classNameSlug, onInvalidSlug)
+
+  const viewTransition: ViewTransitionType = ((
+    strings: TemplateStringsArray | Promise<string> | undefined,
+    ...values: CssVariableType[]
+  ) => {
+    return newCssClassNameObject(
+      viewTransitionCommon(strings as any, values, classNameSlug, onInvalidSlug) // eslint-disable-line @typescript-eslint/no-explicit-any
+    )
+  }) as ViewTransitionType
+
+  const Style: StyleType = ({ children, nonce } = {}) =>
+    raw(
+      `<style id="${id}"${nonce ? ` nonce="${nonce}"` : ''}>${
+        children ? (children as unknown as CssClassName)[STYLE_STRING] : ''
+      }</style>`,
+      [
+        ({ context }) => {
+          nonceMap.set(context, nonce)
+          return undefined
+        },
+      ]
+    )
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ;(Style as any)[DOM_RENDERER] = StyleRenderToDom
+
+  return {
+    css,
+    cx,
+    keyframes,
+    viewTransition: viewTransition as ViewTransitionType,
+    Style,
+  }
+}
+
+interface DefaultContextType {
+  css: CssType
+  cx: CxType
+  keyframes: KeyframesType
+  viewTransition: ViewTransitionType
+  Style: StyleType
+}
+
+const defaultContext: DefaultContextType = createCssContext({
+  id: DEFAULT_STYLE_ID,
+})
+
+/**
+ * @experimental
+ * `css` is an experimental feature.
+ * The API might be changed.
+ */
+export const css = defaultContext.css
+
+/**
+ * @experimental
+ * `cx` is an experimental feature.
+ * The API might be changed.
+ */
+export const cx = defaultContext.cx
+
+/**
+ * @experimental
+ * `keyframes` is an experimental feature.
+ * The API might be changed.
+ */
+export const keyframes = defaultContext.keyframes
+
+/**
+ * @experimental
+ * `viewTransition` is an experimental feature.
+ * The API might be changed.
+ */
+export const viewTransition = defaultContext.viewTransition
+
+/**
+ * @experimental
+ * `Style` is an experimental feature.
+ * The API might be changed.
+ */
+export const Style = defaultContext.Style

package/plugins/acryl-router/src/core/helper/dev/index.test.ts

@@ -0,0 +1,181 @@
+import { getRouterName, inspectRoutes, showRoutes } from './index.ts'
+import { Acryl } from '../../app.ts'
+import { RegExpRouter } from '../../router/reg-exp-router/index.ts'
+import type { Handler, MiddlewareHandler } from '../../types.ts'
+
+const namedMiddleware: MiddlewareHandler = (_, next) => next()
+const namedHandler: Handler = (c) => c.text('hi')
+const app = new Acryl()
+  .use('*', (_c, next) => next())
+  .get(
+    '/',
+    (_, next) => next(),
+    (c) => c.text('hi')
+  )
+  .get('/named', namedMiddleware, namedHandler)
+  .post('/', (c) => c.text('hi'))
+  .put('/', (c) => c.text('hi'))
+  .patch('/', (c) => c.text('hi'))
+  .delete('/', (c) => c.text('hi'))
+  .options('/', (c) => c.text('hi'))
+  .get('/static', () => new Response('hi'))
+
+describe('inspectRoutes()', () => {
+  it('should return correct data', async () => {
+    expect(inspectRoutes(app)).toEqual([
+      { path: '/*', method: 'ALL', name: '[middleware]', isMiddleware: true },
+      { path: '/', method: 'GET', name: '[middleware]', isMiddleware: true },
+      { path: '/', method: 'GET', name: '[handler]', isMiddleware: false },
+      { path: '/named', method: 'GET', name: 'namedMiddleware', isMiddleware: true },
+      { path: '/named', method: 'GET', name: 'namedHandler', isMiddleware: false },
+      { path: '/', method: 'POST', name: '[handler]', isMiddleware: false },
+      { path: '/', method: 'PUT', name: '[handler]', isMiddleware: false },
+      { path: '/', method: 'PATCH', name: '[handler]', isMiddleware: false },
+      { path: '/', method: 'DELETE', name: '[handler]', isMiddleware: false },
+      { path: '/', method: 'OPTIONS', name: '[handler]', isMiddleware: false },
+      { path: '/static', method: 'GET', name: '[handler]', isMiddleware: false },
+    ])
+  })
+
+  it('should return [handler] also for sub app', async () => {
+    const subApp = new Acryl()
+
+    subApp.get('/', (c) => c.json(0))
+    subApp.onError((_, c) => c.json(0))
+
+    const mainApp = new Acryl()
+    mainApp.route('/', subApp)
+    expect(inspectRoutes(mainApp)).toEqual([
+      {
+        isMiddleware: false,
+        method: 'GET',
+        name: '[handler]',
+        path: '/',
+      },
+    ])
+  })
+})
+
+describe('showRoutes()', () => {
+  let logs: string[] = []
+
+  let originalLog: typeof console.log
+  beforeAll(() => {
+    originalLog = console.log
+    console.log = (...args) => logs.push(...args)
+  })
+  afterAll(() => {
+    console.log = originalLog
+  })
+
+  beforeEach(() => {
+    logs = []
+  })
+  it('should render simple output', async () => {
+    showRoutes(app)
+    expect(logs).toEqual([
+      '\x1b[32mGET\x1b[0m      /',
+      '\x1b[32mGET\x1b[0m      /named',
+      '\x1b[32mPOST\x1b[0m     /',
+      '\x1b[32mPUT\x1b[0m      /',
+      '\x1b[32mPATCH\x1b[0m    /',
+      '\x1b[32mDELETE\x1b[0m   /',
+      '\x1b[32mOPTIONS\x1b[0m  /',
+      '\x1b[32mGET\x1b[0m      /static',
+    ])
+  })
+
+  it('should render output includes handlers and middlewares', async () => {
+    showRoutes(app, { verbose: true })
+    expect(logs).toEqual([
+      '\x1b[32mALL\x1b[0m      /*',
+      '           [middleware]',
+      '\x1b[32mGET\x1b[0m      /',
+      '           [middleware]',
+      '           [handler]',
+      '\x1b[32mGET\x1b[0m      /named',
+      '           namedMiddleware',
+      '           namedHandler',
+      '\x1b[32mPOST\x1b[0m     /',
+      '           [handler]',
+      '\x1b[32mPUT\x1b[0m      /',
+      '           [handler]',
+      '\x1b[32mPATCH\x1b[0m    /',
+      '           [handler]',
+      '\x1b[32mDELETE\x1b[0m   /',
+      '           [handler]',
+      '\x1b[32mOPTIONS\x1b[0m  /',
+      '           [handler]',
+      '\x1b[32mGET\x1b[0m      /static',
+      '           [handler]',
+    ])
+  })
+
+  it('should render not colorized output', async () => {
+    showRoutes(app, { colorize: false })
+    expect(logs).toEqual([
+      'GET      /',
+      'GET      /named',
+      'POST     /',
+      'PUT      /',
+      'PATCH    /',
+      'DELETE   /',
+      'OPTIONS  /',
+      'GET      /static',
+    ])
+  })
+})
+
+describe('showRoutes() in NO_COLOR', () => {
+  let logs: string[] = []
+
+  let originalLog: typeof console.log
+  beforeAll(() => {
+    vi.stubEnv('NO_COLOR', '1')
+    originalLog = console.log
+    console.log = (...args) => logs.push(...args)
+  })
+  afterAll(() => {
+    vi.unstubAllEnvs()
+    console.log = originalLog
+  })
+
+  beforeEach(() => {
+    logs = []
+  })
+  it('should render not colorized output', async () => {
+    showRoutes(app)
+    expect(logs).toEqual([
+      'GET      /',
+      'GET      /named',
+      'POST     /',
+      'PUT      /',
+      'PATCH    /',
+      'DELETE   /',
+      'OPTIONS  /',
+      'GET      /static',
+    ])
+  })
+  it('should render colorized output if colorize: true', async () => {
+    showRoutes(app, { colorize: true })
+    expect(logs).toEqual([
+      '\x1b[32mGET\x1b[0m      /',
+      '\x1b[32mGET\x1b[0m      /named',
+      '\x1b[32mPOST\x1b[0m     /',
+      '\x1b[32mPUT\x1b[0m      /',
+      '\x1b[32mPATCH\x1b[0m    /',
+      '\x1b[32mDELETE\x1b[0m   /',
+      '\x1b[32mOPTIONS\x1b[0m  /',
+      '\x1b[32mGET\x1b[0m      /static',
+    ])
+  })
+})
+
+describe('getRouterName()', () => {
+  it('Should return the correct router name', async () => {
+    const app = new Acryl({
+      router: new RegExpRouter(),
+    })
+    expect(getRouterName(app)).toBe('RegExpRouter')
+  })
+})

package/plugins/acryl-router/src/core/helper/dev/index.ts

@@ -0,0 +1,79 @@
+/**
+ * @module
+ * Dev Helper for Acryl.
+ */
+
+import type { Acryl } from '../../app.ts'
+import type { Env, RouterRoute } from '../../types.ts'
+import { getColorEnabled } from '../../utils/color.ts'
+import { findTargetHandler, isMiddleware } from '../../utils/handler.ts'
+
+interface ShowRoutesOptions {
+  verbose?: boolean
+  colorize?: boolean
+}
+
+interface RouteData {
+  path: string
+  method: string
+  name: string
+  isMiddleware: boolean
+}
+
+const handlerName = (handler: Function): string => {
+  return handler.name || (isMiddleware(handler) ? '[middleware]' : '[handler]')
+}
+
+export const inspectRoutes = <E extends Env>(acryl: Acryl<E>): RouteData[] => {
+  return acryl.routes.map(({ path, method, handler }: RouterRoute) => {
+    const targetHandler = findTargetHandler(handler)
+    return {
+      path,
+      method,
+      name: handlerName(targetHandler),
+      isMiddleware: isMiddleware(targetHandler),
+    }
+  })
+}
+
+export const showRoutes = <E extends Env>(acryl: Acryl<E>, opts?: ShowRoutesOptions): void => {
+  const colorEnabled = opts?.colorize ?? getColorEnabled()
+  const routeData: Record<string, RouteData[]> = {}
+  let maxMethodLength = 0
+  let maxPathLength = 0
+
+  inspectRoutes(acryl)
+    .filter(({ isMiddleware }) => opts?.verbose || !isMiddleware)
+    .map((route) => {
+      const key = `${route.method}-${route.path}`
+      ;(routeData[key] ||= []).push(route)
+      if (routeData[key].length > 1) {
+        return
+      }
+      maxMethodLength = Math.max(maxMethodLength, route.method.length)
+      maxPathLength = Math.max(maxPathLength, route.path.length)
+      return { method: route.method, path: route.path, routes: routeData[key] }
+    })
+    .forEach((data) => {
+      if (!data) {
+        return
+      }
+      const { method, path, routes } = data
+
+      const methodStr = colorEnabled ? `\x1b[32m${method}\x1b[0m` : method
+      console.log(`${methodStr} ${' '.repeat(maxMethodLength - method.length)} ${path}`)
+
+      if (!opts?.verbose) {
+        return
+      }
+
+      routes.forEach(({ name }) => {
+        console.log(`${' '.repeat(maxMethodLength + 3)} ${name}`)
+      })
+    })
+}
+
+export const getRouterName = <E extends Env>(app: Acryl<E>): string => {
+  app.router.match('GET', '/')
+  return app.router.name
+}