acrylblends 0.6.3 → 0.7.0

package/plugins/acryl-router/src/core/jsx/dom/css.test.tsx

@@ -1,149 +0,0 @@
-/** @jsxImportSource ../ */
-import { JSDOM } from 'jsdom'
-// run tests by old style jsx default
-// acryl-router/jsx/jsx-runtime and acryl-router/jsx/dom/jsx-runtime are tested in their respective settings
-import { render } from './index.ts'
-import type { JSXNode } from '../index.ts'
-import { Style, createCssContext, css, rawCssString } from '../../helper/css/index.ts'
-import { minify } from '../../helper/css/common.ts'
-import { renderTest } from '../../helper/css/common.case.test.tsx'
-
-describe('Style and css for jsx/dom', () => {
-  beforeAll(() => {
-    global.requestAnimationFrame = (cb) => setTimeout(cb)
-  })
-
-  let dom: JSDOM
-  let root: HTMLElement
-  beforeEach(() => {
-    dom = new JSDOM('<html><body><div id="root"></div></body></html>', {
-      runScripts: 'dangerously',
-    })
-    global.document = dom.window.document
-    global.HTMLElement = dom.window.HTMLElement
-    global.SVGElement = dom.window.SVGElement
-    global.Text = dom.window.Text
-    root = document.getElementById('root') as HTMLElement
-  })
-
-  it('<Style />', async () => {
-    const App = () => {
-      return (
-        <div>
-          <Style />
-          <div
-            class={css`
-              color: red;
-            `}
-          >
-            red
-          </div>
-        </div>
-      )
-    }
-    render(<App />, root)
-    expect(root.innerHTML).toBe(
-      '<div><style id="acryl-css"></style><div class="css-3142110215">red</div></div>'
-    )
-    await Promise.resolve()
-    expect(root.querySelector('style')?.sheet?.cssRules[0].cssText).toBe(
-      '.css-3142110215 {color: red;}'
-    )
-  })
-
-  it('<Style nonce="1234" />', async () => {
-    const App = () => {
-      return (
-        <div>
-          <Style nonce='1234' />
-        </div>
-      )
-    }
-    render(<App />, root)
-    expect(root.innerHTML).toBe('<div><style id="acryl-css" nonce="1234"></style></div>')
-  })
-
-  it('<Style>{css`global`}</Style>', async () => {
-    const App = () => {
-      return (
-        <div>
-          <Style>{css`
-            color: red;
-          `}</Style>
-          <div
-            class={css`
-              color: red;
-            `}
-          >
-            red
-          </div>
-        </div>
-      )
-    }
-    render(<App />, root)
-    expect(root.innerHTML).toBe(
-      '<div><style id="acryl-css">color:red</style><div class="css-3142110215">red</div></div>'
-    )
-  })
-
-  it('classNameSlug with createCssContext', async () => {
-    const { css: customCss, Style: CustomStyle } = createCssContext({
-      id: 'custom-dom',
-      classNameSlug: (hash, label) => (label ? `h-${label}` : hash),
-    })
-    const App = () => {
-      return (
-        <div>
-          <CustomStyle />
-          <div
-            class={customCss`
-              /* hero */
-              color: blue;
-            `}
-          >
-            blue
-          </div>
-        </div>
-      )
-    }
-    render(<App />, root)
-    expect(root.innerHTML).toBe(
-      '<div><style id="custom-dom"></style><div class="h-hero">blue</div></div>'
-    )
-    await Promise.resolve()
-    expect(root.querySelector('style')?.sheet?.cssRules[0].cssText).toBe('.h-hero {color: blue;}')
-  })
-})
-
-describe('render', () => {
-  renderTest(() => {
-    const cssContext = createCssContext({ id: 'acryl-css' })
-
-    const dom = new JSDOM('<html><body><div id="root"></div></body></html>', {
-      runScripts: 'dangerously',
-    })
-    global.document = dom.window.document
-    global.HTMLElement = dom.window.HTMLElement
-    global.Text = dom.window.Text
-    const root = document.getElementById('root') as HTMLElement
-
-    const toString = async (node: JSXNode) => {
-      render(node, root)
-      await Promise.resolve()
-      const style = root.querySelector('style')
-      if (style) {
-        style.textContent = minify(
-          [...(style.sheet?.cssRules || [])].map((r) => r.cssText).join('') || ''
-        )
-      }
-      return root.innerHTML
-    }
-
-    return {
-      toString,
-      rawCssString,
-      ...cssContext,
-      support: { nest: false },
-    }
-  })
-})

package/plugins/acryl-router/src/core/jsx/dom/hooks/index.test.tsx

@@ -1,172 +0,0 @@
-/** @jsxImportSource ../../ */
-import { JSDOM } from 'jsdom'
-import { useActionState, useFormStatus, useOptimistic } from './index.ts'
-import { render, useCallback, useState } from '../index.ts'
-
-describe('Hooks', () => {
-  beforeAll(() => {
-    global.requestAnimationFrame = (cb) => setTimeout(cb)
-  })
-
-  let dom: JSDOM
-  let root: HTMLElement
-  beforeEach(() => {
-    dom = new JSDOM('<html><body><div id="root"></div></body></html>', {
-      runScripts: 'dangerously',
-    })
-    global.document = dom.window.document
-    global.HTMLElement = dom.window.HTMLElement
-    global.SVGElement = dom.window.SVGElement
-    global.Text = dom.window.Text
-    global.FormData = dom.window.FormData
-    root = document.getElementById('root') as HTMLElement
-  })
-
-  describe('useActionState', () => {
-    it('should return initial state', () => {
-      const [state] = useActionState(() => {}, 'initial')
-      expect(state).toBe('initial')
-    })
-
-    it('should return updated state', async () => {
-      const action = vi.fn().mockReturnValue('updated')
-
-      const App = () => {
-        const [state, formAction] = useActionState(action, 'initial')
-        return (
-          <>
-            <div>{state}</div>
-            <form action={formAction}>
-              <input type='text' name='name' value='updated' />
-              <button>Submit</button>
-            </form>
-          </>
-        )
-      }
-
-      render(<App />, root)
-      expect(root.innerHTML).toBe(
-        '<div>initial</div><form><input type="text" name="name" value="updated"><button>Submit</button></form>'
-      )
-      root.querySelector('button')?.click()
-      await Promise.resolve()
-      await Promise.resolve()
-      expect(root.innerHTML).toBe(
-        '<div>updated</div><form><input type="text" name="name" value="updated"><button>Submit</button></form>'
-      )
-
-      expect(action).toHaveBeenCalledOnce()
-      const [initialState, formData] = action.mock.calls[0]
-      expect(initialState).toBe('initial')
-      expect(formData).toBeInstanceOf(FormData)
-      expect(formData.get('name')).toBe('updated')
-    })
-  })
-
-  describe('useFormStatus', () => {
-    it('should return initial state', () => {
-      const status = useFormStatus()
-      expect(status).toEqual({
-        pending: false,
-        data: null,
-        method: null,
-        action: null,
-      })
-    })
-
-    it('should return updated state', async () => {
-      let formResolve: () => void = () => {}
-      const formPromise = new Promise<void>((r) => (formResolve = r))
-      let status: ReturnType<typeof useFormStatus> | undefined
-      const Status = () => {
-        status = useFormStatus()
-        return null
-      }
-      const App = () => {
-        const [, setCount] = useState(0)
-        const action = useCallback(() => {
-          setCount((count) => count + 1)
-          return formPromise
-        }, [])
-        return (
-          <>
-            <form action={action}>
-              <Status />
-              <input type='text' name='name' value='updated' />
-              <button>Submit</button>
-            </form>
-          </>
-        )
-      }
-
-      render(<App />, root)
-      expect(root.innerHTML).toBe(
-        '<form><input type="text" name="name" value="updated"><button>Submit</button></form>'
-      )
-      root.querySelector('button')?.click()
-      await Promise.resolve()
-      await Promise.resolve()
-      await Promise.resolve()
-      await Promise.resolve()
-      expect(status).toEqual({
-        pending: true,
-        data: expect.any(FormData),
-        method: 'post',
-        action: expect.any(Function),
-      })
-      formResolve?.()
-      await Promise.resolve()
-      await Promise.resolve()
-      expect(status).toEqual({
-        pending: false,
-        data: null,
-        method: null,
-        action: null,
-      })
-    })
-  })
-
-  describe('useOptimistic', () => {
-    it('should return updated state', async () => {
-      let formResolve: () => void = () => {}
-      const formPromise = new Promise<void>((r) => (formResolve = r))
-      const App = () => {
-        const [count, setCount] = useState(0)
-        const [optimisticCount, setOptimisticCount] = useOptimistic(count, (_c, n: number) => n)
-        const action = useCallback(async () => {
-          setOptimisticCount(count + 1)
-          await formPromise
-          setCount((count) => count + 2)
-        }, [])
-
-        return (
-          <>
-            <form action={action}>
-              <div>{optimisticCount}</div>
-              <input type='text' name='name' value='updated' />
-              <button>Submit</button>
-            </form>
-          </>
-        )
-      }
-
-      render(<App />, root)
-      expect(root.innerHTML).toBe(
-        '<form><div>0</div><input type="text" name="name" value="updated"><button>Submit</button></form>'
-      )
-      root.querySelector('button')?.click()
-      await Promise.resolve()
-      expect(root.innerHTML).toBe(
-        '<form><div>1</div><input type="text" name="name" value="updated"><button>Submit</button></form>'
-      )
-      formResolve?.()
-      await Promise.resolve()
-      await Promise.resolve()
-      await Promise.resolve()
-      await Promise.resolve()
-      expect(root.innerHTML).toBe(
-        '<form><div>2</div><input type="text" name="name" value="updated"><button>Submit</button></form>'
-      )
-    })
-  })
-})