@e280/sly 0.3.0-1 → 0.3.0-10

package/README.md

@@ -2,33 +2,35 @@
 <div align="center"><img alt="" width="256" src="./assets/favicon.png"/></div>
 
 # 🦝 sly
-> *mischievous shadow views*
 
 ```sh
 npm install lit @e280/sly @e280/strata @e280/stz
 ```
 
-[@e280](https://e280.org/)'s new [lit](https://lit.dev/)-based frontend webdev library.
+#### [@e280](https://e280.org/)'s [lit-based](https://lit.dev/) web library for reactive light or shadow views
 
-- 🍋 [**#views**](#views) — hooks-based, shadow-dom'd, template-literal'd
-- 🪝 [**#hooks**](#hooks) — full reference of available view hooks
-- 🫛 [**#ops**](#ops) — reactive tooling for async operations
-- ⏳ [**#loaders**](#loaders) — animated loading spinners for rendering ops
-- 🪙 [**#loot**](#loot) — drag-and-drop facilities
-- 🪄 [**#dom**](#dom) — the "it's not jquery" multitool
-- 🧪 https://sly.e280.org/ — our testing page
+- 🎭 [**#views,**](#views) reactive lit views, light-dom or shadow-dom
+- 🪝 [**#hooks,**](#hooks) react-like composable hooks
+- 🫛 [**#ops,**](#ops) tooling for async operations ui
+- ⏳ [**#loaders,**](#loaders) render ops with animated loading spinners
+- 🪙 [**#loot,**](#loot) drag-and-drop facilities
+- 🪄 [**#dom,**](#dom) the "it's not jquery" multitool
+- 🧪 **https://sly.e280.org/** sly's testing page
 
 
 
 <br/><br/>
 <a id="views"></a>
 
-## 🍋 views
-> *modern views.. in lightness, or darkness..*  
+## 🎭 views
+> *reactive lit-html views*
 
-- 🪶 **no compile step** — just god's honest javascript, via [lit](https://lit.dev/)-html tagged-template-literals
-- ⚡ **reactive** — views auto-rerender whenever any [strata](https://github.com/e280/strata)-compatible state changes
-- 🪝 **hooks-based** — declarative rendering with [modern hooks](#hooks) familiar to react devs
+- 🔮 [**see codepen demo,**](https://codepen.io/editor/ChaseMoskal/pen/019cd681-722b-7f51-a961-bc16e3d524a9) plain html (no build!)
+- 🌗 **light or shadow,** render nakedly on the page, or within a cozy shadow bubble
+- 🪝 **hooks-based,** familiar react-style [hooks](#hooks)
+- ⚡ **auto-reactive,** views magically rerender on [strata](https://github.com/e280/strata)-compatible state changes
+- 🪶 **no compile step,** just god's honest javascript via [lit](https://lit.dev/)-html tagged-templates
+- 🧩 **not web components,** no dom registration needed, just vibes and good typings
 
 ```ts
 import {html} from "lit"
@@ -40,7 +42,7 @@ export const MyShadowView = shadow(() => html`<p>shrouded in darkness</p>`)
 ```
 
 ### 🌞 light views
-> *just pretend it's react*
+> *just pretend it's like react!*
 
 - **define a light view**
     ```ts
@@ -58,14 +60,17 @@ export const MyShadowView = shadow(() => html`<p>shrouded in darkness</p>`)
     ```
 - **render it into the dom**
     ```ts
-    dom.in(".demo").render(html`
+    dom.render(dom(".demo"), html`
       <h1>my cool counter demo</h1>
       ${MyCounter(123)}
     `)
     ```
+- **remember, light views are naked.**  
+    so they don't have a containing host element,  
+    and they can't have their own styles.  
 
 ### 🌚 shadow views
-> *each shadow view gets its own cozy [shadow-dom](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM) bubble and supports [slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots)*
+> *each shadow view gets its own cozy [shadow-dom](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM) bubble and supports [slotting](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots)*
 
 - **define a shadow view**
     ```ts
@@ -73,28 +78,33 @@ export const MyShadowView = shadow(() => html`<p>shrouded in darkness</p>`)
     import {shadow, useName, useCss, useSignal} from "@e280/sly"
 
     export const MyShadowCounter = shadow((start: number) => {
-      useName("shadow-counter")
+      useName("counter")
       useCss(css`button { color: cyan }`)
 
       const $count = useSignal(start)
       const increment = () => $count.value++
 
       return html`
-        <button @click="${increment}">${$count()}</button>
+        <button @click="${increment}">${$count.value}</button>
         <slot></slot>
       `
     })
     ```
 - **render it into the dom**
     ```ts
-    dom.in(".demo").render(html`
+    dom.render(dom(".demo"), html`
       <h1>my cool counter demo</h1>
       ${MyShadowCounter(234)}
     `)
     ```
+    - shadow views have a host element, rendered output looks like:
+        ```html
+        <h1>my cool counter demo</h1>
+        <sly-shadow view="counter"></sly-shadow>
+        ```
 - **.with to nest children or set attrs**
     ```ts
-    dom.in(".demo").render(html`
+    dom.render(dom(".demo"), html`
       <h1>my cool counter demo</h1>
 
       ${MyShadowCounter.with({
@@ -106,13 +116,36 @@ export const MyShadowView = shadow(() => html`<p>shrouded in darkness</p>`)
       })}
     `)
     ```
-- **oh, you can do custom shadow config if needed**
+- **you can do custom shadow setup if needed** (default shown)
     ```ts
-    const MyCustomShadow = shadow.config(() => {
-      const host = document.createElement("div")
+    import {SlyShadow} from "@e280/sly"
+
+    const customShadow = shadow.setup(() => {
+      SlyShadow.register()
+      const host = document.createElement("sly-shadow")
       const shadow = host.attachShadow({mode: "open"})
       return {host, shadow}
-    })(() => html`<p>shrouded in darkness</p>`)
+    })
+
+    const MyShadowView = customShadow(() => html`<p>shrouded in darkness</p>`)
+    ```
+
+### 🍨 web components
+> *web-native custom elements*
+
+- **they use hooks like the views, but they don't take props**
+    ```ts
+    import {html} from "lit"
+    import {lightElement, shadowElement} from "@e280/sly"
+
+    const MyLight = lightElement(() => html`hello`)
+    const MyShadow = shadowElement(() => html`hello`)
+
+    dom.register({MyLight, MyShadow})
+    ```
+    ```html
+    <my-light></my-light>
+    <my-shadow></my-shadow>
     ```
 
 
@@ -121,48 +154,58 @@ export const MyShadowView = shadow(() => html`<p>shrouded in darkness</p>`)
 <a id="hooks"></a>
 
 ## 🪝 hooks
-> *composable view state and utilities*  
+> *composable view state and utilities*
 
 ### 👮 follow the hooks rules
 
-just like [react hooks](https://react.dev/warnings/invalid-hook-call-warning), the execution order of sly's `use` hooks actually matters.
+just like [react hooks](https://react.dev/warnings/invalid-hook-call-warning), the execution order of hooks seriously matters.
 
-you must not call these hooks under `if` conditionals, or `for` loops, or in callbacks, or after a conditional `return` statement, or anything like that.. *otherwise, heed my warning: weird bad stuff will happen..*
+you must not call these hooks under if-conditionals, or for-loops, or inside callback functions, or after a conditional return statement, or anything like that.. *otherwise, heed my warning: weird bad stuff will happen..*
 
 ### 🌚 shadow-only hooks
-- **useName** — *(shadow only)* — set the "view" attribute value
+- **useName,** set the "view" attribute value
     ```ts
     useName("squarepants")
       // <sly-shadow view="squarepants">
     ```
-- **useCss** — *(shadow only)*  — attach stylesheets (use lit's `css`!) to the shadow root
+- **useCss,** attach stylesheets (use lit's `css`!) to the shadow root
     ```ts
     useCss(css1, css2, css3)
     ```
-- **useHost** — *(shadow only)*  — get the host element
+- **useHost,** get the host element
     ```ts
     const host = useHost()
     ```
-- **useShadow** — *(shadow only)*  — get the shadow root
+- **useShadow,** get the shadow root
     ```ts
     const shadow = useShadow()
     ```
+- **useAttrs,** access host element attributes (and rerender on attr changes)
+    ```ts
+    const attrs = useAttrs({
+      name: String,
+      count: Number,
+      active: Boolean,
+    })
+
+    attrs.count = 123 // set the attr
+    ```
 
 ### 🌞 universal hooks
-- **useState** — react-like hook to create some reactive state (we prefer signals)
+- **useState,** react-like hook to create some reactive state (we prefer signals)
     ```ts
     const [count, setCount] = useState(0)
 
     const increment = () => setCount(n => n + 1)
     ```
-- **useRef** — react-like hook to make a non-reactive box for a value
+- **useRef,** react-like hook to make a non-reactive box for a value
     ```ts
     const ref = useRef(0)
 
     ref.current // 0
     ref.current = 1 // does not trigger rerender
     ```
-- **useSignal** — create a [strata](https://github.com/e280/strata) signal
+- **useSignal,** create a [strata](https://github.com/e280/strata) signal
     ```ts
     const $count = useSignal(1)
 
@@ -172,13 +215,11 @@ you must not call these hooks under `if` conditionals, or `for` loops, or in cal
     // write the signal
     $count(2)
     ```
-    - see [strata readme](https://github.com/e280/strata)
-- **useDerived** — create a [strata](https://github.com/e280/strata) derived signal
+- **useDerived,** create a [strata](https://github.com/e280/strata) derived signal
     ```ts
     const $product = useDerived(() => $count() * $whatever())
     ```
-    - see [strata readme](https://github.com/e280/strata)
-- **useOnce** — run fn at initialization, and return a value
+- **useOnce,** run fn at initialization, and return a value
     ```ts
     const whatever = useOnce(() => {
       console.log("happens one time")
@@ -187,14 +228,14 @@ you must not call these hooks under `if` conditionals, or `for` loops, or in cal
 
     whatever // 123
     ```
-- **useMount** — setup mount/unmount lifecycle
+- **useMount,** setup mount/unmount lifecycle
     ```ts
     useMount(() => {
       console.log("mounted")
       return () => console.log("unmounted")
     })
     ```
-- **useWake** — run fn each time mounted, and return value
+- **useWake,** run fn each time mounted, and return value
     ```ts
     const whatever = useWake(() => {
       console.log("mounted")
@@ -203,7 +244,7 @@ you must not call these hooks under `if` conditionals, or `for` loops, or in cal
 
     whatever // 123
     ```
-- **useLife** — mount/unmount lifecycle, but also return a value
+- **useLife,** mount/unmount lifecycle, but also return a value
     ```ts
     const whatever = useLife(() => {
       console.log("mounted")
@@ -213,30 +254,30 @@ you must not call these hooks under `if` conditionals, or `for` loops, or in cal
 
     whatever // 123
     ```
-- **useRender** — returns a fn to rerender the view (debounced)
+- **useRender,** returns a fn to rerender the view (debounced)
     ```ts
     const render = useRender()
 
     render().then(() => console.log("render done"))
     ```
-- **useRendered** — get a promise that resolves *after* the next render
+- **useRendered,** get a promise that resolves *after* the next render
     ```ts
     useRendered().then(() => console.log("rendered"))
     ```
-- **useOp** — start loading an op based on an async fn
+- **useOp,** start loading an op based on an async fn
     ```ts
     const op = useOp(async() => {
       await nap(5000)
       return 123
     })
     ```
-- **useOpPromise** — start loading an op based on a promise
+- **useOpPromise,** start loading an op based on a promise
     ```ts
     const op = useOpPromise(doAsyncWork())
     ```
 
 ### 🧑‍🍳 happy hooks recipes
-- make a ticker — mount, cycle, and nap
+- make a ticker, mount, cycle, and nap
     ```ts
     import {cycle, nap} from "@e280/stz"
     ```
@@ -250,7 +291,9 @@ you must not call these hooks under `if` conditionals, or `for` loops, or in cal
     ```
 - wake + rendered, to do something after each mount's first render
     ```ts
-    useWake(() => useRendered.then(() => {
+    const rendered = useRendered()
+
+    useWake(() => rendered.then(() => {
       console.log("after first render")
     }))
     ```
@@ -261,7 +304,7 @@ you must not call these hooks under `if` conditionals, or `for` loops, or in cal
 <a id="ops"></a>
 
 ## 🫛 ops
-> *tools for async operations and loading spinners*  
+> *helpers for async operations*
 
 ```ts
 import {nap} from "@e280/stz"
@@ -296,22 +339,22 @@ import {Pod, podium, Op, loaders} from "@e280/sly"
     podium.value(["ready", 123])
       // 123
     ```
-- see more at [podium.ts](./s/ops/podium.ts)
+- see more at [podium.ts](./s/op/podium.ts)
 
 ### 🫛 ops: nice pod ergonomics
-- an `Op<V>` wraps a pod with a signal for reactivity
+- an `Op<V>` wraps a pod with a strata signal for reactivity
 - create an op
     ```ts
-    const op = new Op<number>() // loading status by default
+    new Op<number>() // loading status by default
     ```
     ```ts
-    const op = Op.loading<number>()
+    Op.loading<number>()
     ```
     ```ts
-    const op = Op.ready<number>(123)
+    Op.ready<number>(123)
     ```
     ```ts
-    const op = Op.error<number>(new Error())
+    Op.error<number>(new Error())
     ```
 - 🔥 create an op that calls and tracks an async fn
     ```ts
@@ -338,13 +381,12 @@ import {Pod, podium, Op, loaders} from "@e280/sly"
 - select executes a fn based on the status
     ```ts
     const result = op.select({
-      loading: () => "it's loading...",
+      loading: () => "still loading...",
       ready: value => `dude, it's ready! ${value}`,
-      error: err => `dude, there's an error!`,
+      error: err => `ack! an error!`,
     })
 
-    result
-      // "dude, it's ready! 123"
+    result // "dude, it's ready! 123"
     ```
 - morph returns a new pod, transforming the value if ready
     ```ts
@@ -370,7 +412,7 @@ import {Pod, podium, Op, loaders} from "@e280/sly"
 <a id="loaders"></a>
 
 ## ⏳ loaders
-> *animated loading spinners for ops*  
+> *animated loading spinners for ops*
 
 ```ts
 import {loaders} from "@e280/sly"
@@ -527,7 +569,7 @@ import {ev} from "@e280/stz"
 <a id="dom"></a>
 
 ## 🪄 dom
-> *the "it's not jquery!" multitool*  
+> *the "it's not jquery!" multitool*
 
 ```ts
 import {dom} from "@e280/sly"
@@ -661,10 +703,10 @@ import {dom} from "@e280/sly"
     ```
     or if you wanna be more loosey-goosey, skip the spec
     ```ts
-    const a = dom.in(".demo").attrs
-    a.strings.name = "pimsley"
-    a.numbers.count = 125
-    a.booleans.active = true
+    const {attrs} = dom.in(".demo")
+    attrs.strings.name = "pimsley"
+    attrs.numbers.count = 125
+    attrs.booleans.active = true
     ```
 
 

package/package.json

@@ -1,50 +1,43 @@
 {
 	"name": "@e280/sly",
-	"version": "0.3.0-1",
+	"version": "0.3.0-10",
 	"description": "web shadow views",
 	"license": "MIT",
 	"type": "module",
+	"files": [
+		"x",
+		"s"
+	],
 	"main": "./x/index.js",
 	"exports": {
 		".": "./x/index.js",
 		"./dom": "./x/dom/index.js",
-		"./loaders": "./x/loaders/index.js",
+		"./loader": "./x/loader/index.js",
 		"./loot": "./x/loot/index.js",
-		"./ops": "./x/ops/index.js",
+		"./op": "./x/op/index.js",
 		"./view": "./x/view/index.js"
 	},
-	"files": [
-		"x",
-		"s"
-	],
+	"scripts": {
+		"build": "rm -rf x && mkdir x && ln -s '$(realpath s)' x/s && ln -s '$(realpath assets)' x/assets && tsc && scute -v",
+		"start": "octo 'tsc -w' 'scute -wv' 'node --watch x/test.js' 'http-server x'",
+		"count": "find s -path '*/_archive' -prune -o -name '*.ts' -exec wc -l {} +",
+		"test": "node x/test.js"
+	},
 	"peerDependencies": {
 		"lit": "^3.3.2"
 	},
 	"dependencies": {
-		"@e280/strata": "^0.2.8",
-		"@e280/stz": "^0.2.21"
+		"@e280/strata": "^0.3.0-2",
+		"@e280/stz": "^0.2.24"
 	},
 	"devDependencies": {
+		"@e280/octo": "^0.1.0-12",
 		"@e280/science": "^0.1.8",
-		"@e280/scute": "^0.2.2",
+		"@e280/scute": "^0.3.0-1",
 		"http-server": "^14.1.1",
 		"npm-run-all": "^4.1.5",
 		"typescript": "^5.9.3"
 	},
-	"scripts": {
-		"build": "run-s _clean _ln _tsc _scute",
-		"start": "octo 'scute -vw' 'tsc -w' 'node --watch x/tests.test.js' 'http-server x'",
-		"count": "find s -path '*/_archive' -prune -o -name '*.ts' -exec wc -l {} +",
-		"test": "node x/tests.test.js",
-		"test-inspect": "node inspect x/tests.test.js",
-		"_clean": "rm -rf x && mkdir x",
-		"_tsc": "tsc",
-		"_scute": "scute -v",
-		"_ln": "run-s _ln:s _ln:assets",
-		"_ln:s": "ln -s \"$(realpath s)\" x/s",
-		"_ln:assets": "ln -s \"$(realpath assets)\" x/assets",
-		"_lnx:stz": "rm -rf node_modules/@e280/stz && ln -s \"$(realpath ../stz)\" node_modules/@e280/stz"
-	},
 	"author": "Chase Moskal <chasemoskal@gmail.com>",
 	"homepage": "https://github.com/e280/sly#readme",
 	"repository": {
@@ -55,9 +48,10 @@
 		"url": "https://github.com/e280/sly/issues"
 	},
 	"keywords": [
+		"lit",
+		"views",
 		"shadow views",
 		"shadow dom",
-		"components",
-		"lit"
+		"components"
 	]
 }

package/s/demo/demo.bundle.ts

@@ -1,7 +1,11 @@
 
 import {dom} from "../dom/dom.js"
 import {Demo} from "./views/demo.js"
+import {TimeLight} from "./views/time-light.js"
+import {TimeShadow} from "./views/time-shadow.js"
 
-dom.in(".demo").render(Demo())
+dom.register({TimeShadow, TimeLight})
+
+dom.render(dom(".demo"), Demo())
 console.log("🦝 sly")
 

package/s/demo/views/demo.ts

@@ -20,6 +20,9 @@ export const Demo = shadow(() => {
 			})}
 		</p>
 
+		<time-shadow></time-shadow>
+		<time-light></time-light>
+
 		${LoadersView()}
 	`
 })

package/s/demo/views/loaders.ts

@@ -1,8 +1,8 @@
 
 import {css, html} from "lit"
-import {Op} from "../../ops/op.js"
+import {Op} from "../../op/op.js"
 import {shadow} from "../../view/shadow.js"
-import {loaders} from "../../loaders/index.js"
+import {loaders} from "../../loader/index.js"
 import {cssReset, useName, useOnce, useStyles} from "../../view/index.js"
 
 export const LoadersView = shadow(() => {

package/s/demo/views/time-light.ts

@@ -0,0 +1,19 @@
+
+import {html} from "lit"
+import {cycle, nap} from "@e280/stz"
+import {useMount, useSignal} from "../../view/index.js"
+import {lightElement} from "../../view/elements/light.js"
+
+export class TimeLight extends lightElement(() => {
+	const $time = useSignal(Date.now())
+
+	useMount(() => cycle(async() => {
+		await nap(100)
+		$time(Date.now())
+	}))
+
+	return html`
+		<p>${$time()}</p>
+	`
+}) {}
+

package/s/demo/views/time-shadow.ts

@@ -0,0 +1,22 @@
+
+import {css, html} from "lit"
+import {cycle, nap} from "@e280/stz"
+import {shadowElement} from "../../view/elements/shadow.js"
+import {useCss, useMount, useName, useSignal} from "../../view/index.js"
+
+export class TimeShadow extends shadowElement(() => {
+	useName("time-shadow")
+	useCss(css`:host{display:inline-block} button{color:cyan}`)
+
+	const $time = useSignal(Date.now())
+
+	useMount(() => cycle(async() => {
+		await nap(100)
+		$time(Date.now())
+	}))
+
+	return html`
+		<p>${$time()}</p>
+	`
+}) {}
+

package/s/dom/attrs/attrs.ts

@@ -1,9 +1,9 @@
 
 import {AttrSpec} from "../types.js"
 import {onAttrs} from "./parts/on-attrs.js"
-import {attrSpec} from "./parts/attr-spec.js"
 import {AttrProxies} from "./parts/attr-proxies.js"
 import {attrGet, attrSet} from "./parts/attr-fns.js"
+import {attrSpec, AttrSpecOptions} from "./parts/attr-spec.js"
 
 export function attrs(element: HTMLElement) {
 	const proxies = new AttrProxies(element)
@@ -11,8 +11,8 @@ export function attrs(element: HTMLElement) {
 		strings: proxies.strings,
 		numbers: proxies.numbers,
 		booleans: proxies.booleans,
-		on: (fn: () => void) => onAttrs(element, fn),
-		spec: <A extends AttrSpec>(spec: A) => attrSpec(element, spec),
+		on: (fn: MutationCallback) => onAttrs(element, fn),
+		spec: <A extends AttrSpec>(spec: A, options: AttrSpecOptions = {}) => attrSpec(element, spec, options),
 	}
 }
 

package/s/dom/attrs/parts/attr-spec.ts

@@ -2,10 +2,16 @@
 import {attrGet, attrSet} from "./attr-fns.js"
 import {AttrSpec, AttrTypes} from "../../types.js"
 
+export type AttrSpecOptions = {
+	beforeSet?: (attrKey: string) => void
+	afterSet?: (attrKey: string) => void
+}
+
 /** specify available html attributes and their types and create a proxy accessor */
 export const attrSpec = <A extends AttrSpec>(
 		e: HTMLElement,
 		spec: A,
+		options: AttrSpecOptions = {},
 	) => new Proxy(spec, {
 
 	get: (_target, key: string) => {
@@ -18,11 +24,17 @@ export const attrSpec = <A extends AttrSpec>(
 	},
 
 	set: (_target, key: string, value: any) => {
-		switch (spec[key]) {
-			case String: return attrSet.string(e, key, value)
-			case Number: return attrSet.number(e, key, value)
-			case Boolean: return attrSet.boolean(e, key, value)
-			default: throw new Error(`invalid attribute type for "${key}"`)
+		try {
+			options.beforeSet?.(key)
+			switch (spec[key]) {
+				case String: return attrSet.string(e, key, value)
+				case Number: return attrSet.number(e, key, value)
+				case Boolean: return attrSet.boolean(e, key, value)
+				default: throw new Error(`invalid attribute type for "${key}"`)
+			}
+		}
+		finally {
+			options.afterSet?.(key)
 		}
 	},
 }) as any as AttrTypes<A>

package/s/dom/attrs/parts/on-attrs.ts

@@ -1,6 +1,6 @@
 
 /** respond when any attribute changes on the html element */
-export function onAttrs(element: HTMLElement, fn: () => void) {
+export function onAttrs(element: HTMLElement, fn: MutationCallback) {
 	const observer = new MutationObserver(fn)
 	observer.observe(element, {attributes: true})
 	return () => observer.disconnect()

package/s/dom/dom.ts

@@ -11,7 +11,7 @@ import {register} from "./parts/register.js"
 import {Queryable, Renderable} from "./types.js"
 import {queryAll, queryMaybe, queryRequire} from "./parts/queries.js"
 
-export function dom<E extends Element>(selector: string, container: Queryable = document): E {
+export function dom<E extends HTMLElement>(selector: string, container: Queryable = document) {
 	return queryRequire<E>(selector, container)
 }
 

package/s/index.ts

@@ -1,7 +1,7 @@
 
 export * from "./dom/index.js"
-export * from "./loaders/index.js"
+export * from "./loader/index.js"
 export * from "./loot/index.js"
-export * from "./ops/index.js"
+export * from "./op/index.js"
 export * from "./view/index.js"
 

package/s/{loaders → loader}/index.barrel.ts

@@ -1,6 +1,5 @@
 
 export * as anims from "./parts/anims.js"
-export type * from "./parts/anims.js"
 export * from "./parts/ascii-anim.js"
 export * from "./parts/error-display.js"
 export * from "./make.js"

package/s/{loaders → loader}/index.ts

@@ -1,4 +1,3 @@
 
 export * as loaders from "./index.barrel.js"
-export type * from "./index.barrel.js"