jq79 0.1.0

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "jq79",
+  "version": "0.1.0",
+  "description": "Mini JS library",
+  "keywords": [
+    "njs",
+    "jquery"
+  ],
+  "homepage": "https://github.com/jgermade/jk79#readme",
+  "bugs": {
+    "url": "https://github.com/jgermade/jk79/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jgermade/jk79.git"
+  },
+  "license": "ISC",
+  "author": "Jesus Germade <jesus@germade.dev>",
+  "type": "module",
+  "main": "dist/q.js",
+  "scripts": {
+    "test": "vitest run"
+  },
+  "devDependencies": {
+    "@types/node": "^26.1.1",
+    "jsdom": "^29.1.1",
+    "typescript": "^7.0.2",
+    "vitest": "^4.1.10"
+  }
+}

package/src/jk79.test.ts

@@ -0,0 +1,179 @@
+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

@@ -0,0 +1,144 @@
+
+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

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