jq79 0.1.0 → 0.1.3

package/src/jk79.test.ts

@@ -1,179 +0,0 @@
-import { describe, it, expect, beforeEach, vi } from "vitest"
-import { $, $$, parseComponent, createReactiveDeepData } from "./jk79"
-
-describe("$", () => {
-  beforeEach(() => {
-    document.body.innerHTML = `
-      <div id="root">
-        <span class="item">a</span>
-        <span class="item">b</span>
-      </div>
-    `
-  })
-
-  it("queries the document when given a selector string", () => {
-    expect($("#root")).not.toBeNull()
-    expect($("#root")?.tagName).toBe("DIV")
-  })
-
-  it("returns null when a selector string matches nothing", () => {
-    expect($("#missing")).toBeNull()
-  })
-
-  it("queries within an element when given an element + selector", () => {
-    const root = document.getElementById("root")!
-    expect($(root, ".item")?.textContent).toBe("a")
-  })
-})
-
-describe("$$", () => {
-  beforeEach(() => {
-    document.body.innerHTML = `
-      <div id="root">
-        <span class="item">a</span>
-        <span class="item">b</span>
-      </div>
-    `
-  })
-
-  it("returns an array of all matches for a selector string", () => {
-    const items = $$(".item")
-    expect(Array.isArray(items)).toBe(true)
-    expect(items).toHaveLength(2)
-  })
-
-  it("returns an empty array when nothing matches", () => {
-    expect($$(".missing")).toEqual([])
-  })
-
-  it("returns matches scoped to an element when given an element + selector", () => {
-    const root = document.getElementById("root")!
-    const items = $$(root, ".item")
-    expect(items).toHaveLength(2)
-    expect(items.map(el => el.textContent)).toEqual(["a", "b"])
-  })
-})
-
-describe("parseComponent", () => {
-  const component = `
-    <script :setup="{ fname, lname }">
-      const fullName = \`\${fname} \${lname}\`
-    </script>
-
-    <div :bind="{ fullName }"></div>
-    <div class="full-name">
-      {{ fullName }}
-    </div>
-
-    <style>
-    .full-name {
-      color: red;
-    }
-    </style>
-  `
-
-  it("extracts scripts with their attrs and content", () => {
-    const { scripts } = parseComponent(component)
-
-    expect(scripts).toHaveLength(1)
-    expect(scripts[0].attrs).toEqual({ ":setup": "{ fname, lname }" })
-    expect(scripts[0].content).toContain("const fullName")
-  })
-
-  it("extracts styles with their attrs and content", () => {
-    const { styles } = parseComponent(component)
-
-    expect(styles).toHaveLength(1)
-    expect(styles[0].attrs).toEqual({})
-    expect(styles[0].content).toContain(".full-name")
-  })
-
-  it("builds a template AST excluding script/style tags", () => {
-    const { template } = parseComponent(component)
-
-    expect(template).toHaveLength(2)
-
-    expect(template[0]).toEqual({
-      tag: "div",
-      attrs: { ":bind": "{ fullName }" },
-      children: [],
-    })
-
-    expect(template[1]).toEqual({
-      tag: "div",
-      attrs: { class: "full-name" },
-      children: ["{{ fullName }}"],
-    })
-  })
-
-  it("recurses into nested elements", () => {
-    const { template } = parseComponent(`
-      <ul>
-        <li>one</li>
-        <li>two</li>
-      </ul>
-    `)
-
-    expect(template).toEqual([
-      {
-        tag: "ul",
-        attrs: {},
-        children: [
-          { tag: "li", attrs: {}, children: ["one"] },
-          { tag: "li", attrs: {}, children: ["two"] },
-        ],
-      },
-    ])
-  })
-
-  it("returns empty collections for a component with no scripts/styles", () => {
-    const { scripts, styles } = parseComponent("<div>just a div</div>")
-
-    expect(scripts).toEqual([])
-    expect(styles).toEqual([])
-  })
-})
-
-describe("createReactiveDeepData", () => {
-  it("emits the top-level key on a shallow set", () => {
-    const onChange = vi.fn()
-    const state = createReactiveDeepData({ name: "a" }, onChange)
-
-    state.name = "b"
-
-    expect(onChange).toHaveBeenCalledWith("name", "b")
-  })
-
-  it("emits a dot path when setting a property on a nested object present at creation", () => {
-    const onChange = vi.fn()
-    const state = createReactiveDeepData({ user: { address: { city: "NYC" } } }, onChange)
-
-    state.user.address.city = "LA"
-
-    expect(onChange).toHaveBeenCalledWith("user.address.city", "LA")
-  })
-
-  it("emits a dot path when setting a property on an object assigned after creation", () => {
-    const onChange = vi.fn()
-    const state = createReactiveDeepData({ user: null as any }, onChange)
-
-    state.user = { address: { city: "NYC" } }
-    onChange.mockClear()
-
-    state.user.address.city = "LA"
-
-    expect(onChange).toHaveBeenCalledWith("user.address.city", "LA")
-  })
-
-  it("keeps deeper paths reactive after a whole subtree is replaced", () => {
-    const onChange = vi.fn()
-    const state = createReactiveDeepData({ user: { address: { city: "NYC" } } }, onChange)
-
-    state.user.address = { city: "LA" }
-    onChange.mockClear()
-
-    state.user.address.city = "SF"
-
-    expect(onChange).toHaveBeenCalledWith("user.address.city", "SF")
-  })
-})

package/src/jk79.ts

@@ -1,144 +0,0 @@
-
-export const $ = (selectorOrEl: string | Element, selector?: string) => 
-  typeof selectorOrEl === "string"
-    ? document.querySelector(selectorOrEl)
-    : selectorOrEl.querySelector(selector || "")
-
-export const $$ = (selectorOrEl: string | Element, selector?: string) => Array.from(
-  typeof selectorOrEl === "string"
-    ? document.querySelectorAll(selectorOrEl)
-    : selectorOrEl.querySelectorAll(selector || "")
-)
-
-type TemplateNode = {
-  tag: string
-  attrs: Record<string, string>
-  children: (TemplateNode | string)[]
-}
-
-type TagBlock = {
-  attrs: Record<string, string>
-  content: string
-}
-
-const elementAttrs = (el: Element): Record<string, string> =>
-  Object.fromEntries(Array.from(el.attributes).map(attr => [attr.name, attr.value]))
-
-const elementToAST = (el: Element): TemplateNode => ({
-  tag: el.tagName.toLowerCase(),
-  attrs: elementAttrs(el),
-  children: Array.from(el.childNodes).flatMap((node): (TemplateNode | string)[] => {
-    if (node.nodeType === Node.TEXT_NODE) {
-      const text = node.textContent?.trim() ?? ""
-      return text ? [text] : []
-    }
-    if (node.nodeType === Node.ELEMENT_NODE) {
-      return [elementToAST(node as Element)]
-    }
-    return []
-  })
-})
-
-const interpolate = (template: string, data: Record<string, any>): string =>
-  template.replace(/{{\s*(\w+)\s*}}/g, (_, key) => data[key] ?? "")
-
-export const createReactiveDeepData = (
-  data: Record<string, any>,
-  onChange: (dotKey: string, value: any) => void,
-  path = ""
-): Record<string, any> => {
-  Object.entries(data).forEach(([key, value]) => {
-    if (value && typeof value === "object") {
-      data[key] = createReactiveDeepData(value, onChange, path ? `${path}.${key}` : key)
-    }
-  })
-
-  return new Proxy(data, {
-    set(target, key: string, value) {
-      const dotKey = path ? `${path}.${key}` : key
-      if (value && typeof value === "object") {
-        value = createReactiveDeepData(value, onChange, dotKey)
-      }
-      target[key] = value
-      onChange(dotKey, value)
-      return true
-    }
-  })
-}
-
-const renderComponent = (component: Component79, data: Record<string, any> = {}): Node => {
-    const fragment = document.createDocumentFragment()
-    
-    component.template.forEach(node => {
-        const el = document.createElement(node.tag)
-        Object.entries(node.attrs).forEach(([key, value]) => {
-            el.setAttribute(key, value)
-        })
-        node.children.forEach(child => {
-            if (typeof child === "string") {
-                el.appendChild(document.createTextNode(interpolate(child, data)))
-            } else {
-                el.appendChild(renderComponent(new Component79([child], [], []), data))
-            }
-        })
-        fragment.appendChild(el)
-    })
-    return fragment
-}
-
-class Component79 {
-    constructor(public template: TemplateNode[], public scripts: TagBlock[], public styles: TagBlock[]) {
-        this.template = template
-        this.scripts = scripts
-        this.styles = styles
-    }
-}
-
-// converts a string of HTML into a AST (Abstract Syntax Tree) representation of the component
-// Returns an object with the following properties:
-// - template: the template of the component in a AST representation
-// - scripts: {
-//   attrs: the attributes of the script tag
-//   content: the content of the script tag
-// }[]
-// - styles: {
-//   attrs: the attributes of the style tag
-//   content: the content of the style tag
-// }[]
-export const parseComponent = (component: string) => {
-  // example
-  // <script :setup="{ fname, lname }">
-  //   const fullName = `${fname} ${lname}`
-  // </script>
-  //
-  // <div :bind="{ fullName }" />
-  // <div class="full-name">
-  //  {{ fullName }}
-  // </div>
-  //
-  // <style>
-  // .full-name {
-  //  color: red;
-  // }
-  // </style>
-
-  // parsed as the content of a <template> so leading <script>/<style> tags
-  // aren't reparented into <head> by the HTML parser
-  const parsedDOM = new DOMParser().parseFromString(`<template>${component}</template>`, "text/html")
-  const root = parsedDOM.querySelector("template") as HTMLTemplateElement
-
-  const scripts: TagBlock[] = []
-  const styles: TagBlock[] = []
-  const template: TemplateNode[] = []
-
-  Array.from(root.content.children).forEach(el => {
-    const block = { attrs: elementAttrs(el), content: el.textContent ?? "" }
-
-    if (el.tagName === "SCRIPT") scripts.push(block)
-    else if (el.tagName === "STYLE") styles.push(block)
-    else template.push(elementToAST(el))
-  })
-
-  return new Component79(template, scripts, styles)
-}
-

package/vitest.config.ts

@@ -1,7 +0,0 @@
-import { defineConfig } from "vitest/config"
-
-export default defineConfig({
-  test: {
-    environment: "jsdom",
-  },
-})