@lift-html/solid
Advanced tools
Comparing version 0.0.2 to 0.0.3
135
esm/mod.d.ts
@@ -1,44 +0,4 @@ | ||
import { type JSX } from "solid-js"; | ||
declare const HTMLElement_: { | ||
new (): HTMLElement; | ||
prototype: HTMLElement; | ||
}; | ||
export type Attributes = ReadonlyArray<string> | undefined; | ||
export type { Attributes, Htmlify, KnownElements, LiftBaseClass, LiftBaseConstructor, LiftOptions, Reactify, Solidify, } from "@lift-html/core"; | ||
import { type Attributes, type LiftBaseClass, type LiftBaseConstructor, type LiftOptions } from "@lift-html/core"; | ||
/** | ||
* Options for `liftHtml` function. | ||
* | ||
* This is the main way to configure your component. | ||
*/ | ||
export interface LiftOptions<TAttributes extends Attributes> { | ||
observedAttributes: TAttributes; | ||
formAssociated?: boolean | undefined; | ||
init(this: LiftBaseClass<TAttributes, LiftOptions<TAttributes>>): void; | ||
} | ||
/** | ||
* Type returned by `liftHtml` function. | ||
* | ||
* You probably don't need to use this type directly, but it provides a better | ||
* type-safety when using `liftHtml` function. | ||
*/ | ||
export interface LiftBaseConstructor<TAttributes extends Attributes, Options extends LiftOptions<TAttributes>> { | ||
new (): LiftBaseClass<TAttributes, Options>; | ||
} | ||
/** | ||
* Base class for components created with `liftHtml` function. | ||
* | ||
* You probably don't need to use this class directly, it helps with type-safety | ||
* inside `liftHtml` function. | ||
*/ | ||
export declare abstract class LiftBaseClass<TAttributes extends Attributes, T extends LiftOptions<TAttributes>> extends HTMLElement_ { | ||
/** internal property to override attributeChangedCallback */ | ||
abstract acb: ((attrName: string, newValue: string | null) => void) | undefined; | ||
abstract readonly options: T; | ||
static readonly formAssociated: boolean | undefined; | ||
static readonly observedAttributes: Attributes; | ||
abstract attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void; | ||
abstract connectedCallback(): void; | ||
abstract disconnectedCallback(): void; | ||
abstract adoptedCallback(): void; | ||
} | ||
/** | ||
* Creates a custom element. The `init` function is called when the element is | ||
@@ -50,18 +10,18 @@ * connected to the DOM, and you can safely use Solid's reactive primitives like | ||
*```ts | ||
// rendered with <hello-el name="world"></hello-el> | ||
import { liftHtml, useAttributes } from "@lift-html/solid"; | ||
import { createEffect } from "solid-js"; | ||
liftHtml("hello-el", { | ||
observedAttributes: ["name"], | ||
init() { | ||
const props = useAttributes(this); | ||
createEffect(() => { | ||
this.innerText = "Hello, " + props.name; | ||
}); | ||
}, | ||
}); | ||
* // rendered with <hello-el name="world"></hello-el> | ||
* import { liftSolid, useAttributes } from "@lift-html/solid"; | ||
* import { createEffect } from "solid-js"; | ||
* | ||
* liftSolid("hello-el", { | ||
* observedAttributes: ["name"], | ||
* init() { | ||
* const props = useAttributes(this); | ||
* createEffect(() => { | ||
* this.innerText = "Hello, " + props.name; | ||
* }); | ||
* }, | ||
* }); | ||
``` | ||
*/ | ||
export declare function liftHtml<TAttributes extends Attributes, Options extends LiftOptions<TAttributes>>(tagName: string, opts: Partial<LiftOptions<TAttributes>>): LiftBaseConstructor<TAttributes, Options>; | ||
export declare function liftSolid<TAttributes extends Attributes, Options extends LiftOptions<TAttributes>>(tagName: string, opts: Partial<LiftOptions<TAttributes>>): LiftBaseConstructor<TAttributes, Options>; | ||
/** | ||
@@ -72,65 +32,2 @@ * Makes attributes reactive. Returns an object where each key is an attribute | ||
export declare function useAttributes<TAttributes extends Attributes>(instance: LiftBaseClass<TAttributes, LiftOptions<TAttributes>>): Record<NonNullable<TAttributes>[number], string | null>; | ||
/** | ||
* Extending this interface allows you to define custom once and get | ||
* type definitions for it in Solid JSX as well as regular HTML and | ||
* sometimes other frameworks like React. | ||
* | ||
* @example | ||
* | ||
*```ts | ||
// rendered with <hello-el name="world"></hello-el> | ||
import { liftHtml } from "@lift-html/solid"; | ||
const HelloEl = liftHtml("hello-el", { | ||
init() { | ||
this.innerText = "Hello, " + this.getAttribute("name"); | ||
}, | ||
}); | ||
declare module "@lift-html/solid" { | ||
interface KnownElements { | ||
"hello-el": typeof HelloEl; | ||
} | ||
} | ||
``` | ||
*/ | ||
export interface KnownElements { | ||
} | ||
/** | ||
* Add this to your env.d.ts file to make all lift-html components | ||
* available as Solid JSX elements. You only need to do this once | ||
* per project. | ||
* | ||
* @example | ||
* ```ts | ||
* import type { Solidify, KnownElements } from "@lift-html/solid"; | ||
* | ||
* declare module "solid-js" { | ||
* namespace JSX { | ||
* interface IntrinsicElements extends Solidify<KnownElements> {} | ||
* } | ||
* } | ||
* ``` | ||
*/ | ||
export type Solidify<T> = { | ||
[K in keyof T]: JSX.HTMLAttributes<HTMLDivElement>; | ||
}; | ||
/** | ||
* Converts a type of `KnownElements` to a type that can be used in | ||
* `HTMLElementTagNameMap` to make all lift-html components available as | ||
* global HTML elements. You only need to do this once per project. | ||
* | ||
* @example | ||
* ```ts | ||
* import type { Htmlify, KnownElements } from "@lift-html/solid"; | ||
* | ||
* declare global { | ||
* interface HTMLElementTagNameMap extends Htmlify<KnownElements> {} | ||
* } | ||
* ``` | ||
*/ | ||
export type Htmlify<T> = { | ||
[K in keyof T]: HTMLElement & (T[K] extends (abstract new (...args: any) => any) ? InstanceType<T[K]> : T[K]); | ||
}; | ||
export {}; | ||
//# sourceMappingURL=mod.d.ts.map |
import { createRoot, createSignal } from "solid-js"; | ||
// to fix crashes in SSR/Node | ||
const HTMLElement_ = typeof HTMLElement !== "undefined" | ||
? HTMLElement | ||
: class { | ||
}; | ||
import { liftHtml, } from "@lift-html/core"; | ||
/** | ||
* Base class for components created with `liftHtml` function. | ||
* | ||
* You probably don't need to use this class directly, it helps with type-safety | ||
* inside `liftHtml` function. | ||
*/ | ||
export class LiftBaseClass extends HTMLElement_ { | ||
static formAssociated; | ||
static observedAttributes; | ||
} | ||
/** | ||
* Creates a custom element. The `init` function is called when the element is | ||
@@ -24,54 +10,27 @@ * connected to the DOM, and you can safely use Solid's reactive primitives like | ||
*```ts | ||
// rendered with <hello-el name="world"></hello-el> | ||
import { liftHtml, useAttributes } from "@lift-html/solid"; | ||
import { createEffect } from "solid-js"; | ||
liftHtml("hello-el", { | ||
observedAttributes: ["name"], | ||
init() { | ||
const props = useAttributes(this); | ||
createEffect(() => { | ||
this.innerText = "Hello, " + props.name; | ||
}); | ||
}, | ||
}); | ||
* // rendered with <hello-el name="world"></hello-el> | ||
* import { liftSolid, useAttributes } from "@lift-html/solid"; | ||
* import { createEffect } from "solid-js"; | ||
* | ||
* liftSolid("hello-el", { | ||
* observedAttributes: ["name"], | ||
* init() { | ||
* const props = useAttributes(this); | ||
* createEffect(() => { | ||
* this.innerText = "Hello, " + props.name; | ||
* }); | ||
* }, | ||
* }); | ||
``` | ||
*/ | ||
export function liftHtml(tagName, opts) { | ||
class LiftElement extends LiftBaseClass { | ||
acb = undefined; | ||
options = opts; | ||
static observedAttributes = opts.observedAttributes; | ||
static formAssociated = opts.formAssociated; | ||
attributeChangedCallback(attrName, _oldValue, newValue) { | ||
this.acb?.(attrName, newValue); | ||
} | ||
connectedCallback() { | ||
this.cb(true); | ||
} | ||
adoptedCallback() { | ||
this.cb(true); | ||
} | ||
disconnectedCallback() { | ||
this.cb(); | ||
this.acb = undefined; | ||
} | ||
cleanup = []; | ||
/** This callback is called to connect or disconnect the component. */ | ||
cb(connect) { | ||
while (this.cleanup.length) { | ||
this.cleanup.pop()(); | ||
} | ||
if (this.isConnected && connect) { | ||
createRoot((dispose) => { | ||
this.cleanup.push(dispose); | ||
opts.init?.call(this); | ||
}); | ||
} | ||
} | ||
} | ||
if (typeof customElements !== "undefined" && !customElements.get(tagName)) { | ||
customElements.define(tagName, LiftElement); | ||
} | ||
return LiftElement; | ||
export function liftSolid(tagName, opts) { | ||
return liftHtml(tagName, { | ||
...opts, | ||
init(onCleanup) { | ||
createRoot((dispose) => { | ||
opts.init?.call(this, onCleanup); | ||
onCleanup(dispose); | ||
}); | ||
}, | ||
}); | ||
} | ||
@@ -78,0 +37,0 @@ /** |
{ | ||
"name": "@lift-html/solid", | ||
"version": "0.0.2", | ||
"description": "lift-html is a tiny library for building HTML Web Components, components that are meant to enhance existing HTML on the page instead of rendering it on the client or hydrating it. It utilizes SolidJS to make attributes reactive, uses signals for state management and uses hooks to better manipulate the DOM.", | ||
"version": "0.0.3", | ||
"description": "lift-html is a tiny library for building HTML Web Components, components that are meant to enhance existing HTML on the page instead of rendering it on the client or hydrating it. It utilizes SolidJS to make attributes reactive, uses signals for state management and uses hooks to better manipulate the DOM", | ||
"keywords": [ | ||
@@ -25,14 +25,15 @@ "solid", | ||
}, | ||
"contributors": [ | ||
{ | ||
"name": "Yaroslav (JLarky) Lapin", | ||
"email": "jlarky@gmail.com", | ||
"url": "https://jlarky.now.sh/" | ||
} | ||
], | ||
"scripts": { | ||
"test": "node test_runner.js" | ||
}, | ||
"dependencies": { | ||
"solid-js": "*" | ||
"solid-js": "*", | ||
"@lift-html/core": "*" | ||
}, | ||
"devDependencies": {}, | ||
"devDependencies": { | ||
"@types/node": "^20.9.0", | ||
"picocolors": "^1.0.0", | ||
"@deno/shim-deno": "~0.18.0" | ||
}, | ||
"_generatedBy": "dnt@dev" | ||
} |
@@ -1,44 +0,4 @@ | ||
import { type JSX } from "solid-js"; | ||
declare const HTMLElement_: { | ||
new (): HTMLElement; | ||
prototype: HTMLElement; | ||
}; | ||
export type Attributes = ReadonlyArray<string> | undefined; | ||
export type { Attributes, Htmlify, KnownElements, LiftBaseClass, LiftBaseConstructor, LiftOptions, Reactify, Solidify, } from "@lift-html/core"; | ||
import { type Attributes, type LiftBaseClass, type LiftBaseConstructor, type LiftOptions } from "@lift-html/core"; | ||
/** | ||
* Options for `liftHtml` function. | ||
* | ||
* This is the main way to configure your component. | ||
*/ | ||
export interface LiftOptions<TAttributes extends Attributes> { | ||
observedAttributes: TAttributes; | ||
formAssociated?: boolean | undefined; | ||
init(this: LiftBaseClass<TAttributes, LiftOptions<TAttributes>>): void; | ||
} | ||
/** | ||
* Type returned by `liftHtml` function. | ||
* | ||
* You probably don't need to use this type directly, but it provides a better | ||
* type-safety when using `liftHtml` function. | ||
*/ | ||
export interface LiftBaseConstructor<TAttributes extends Attributes, Options extends LiftOptions<TAttributes>> { | ||
new (): LiftBaseClass<TAttributes, Options>; | ||
} | ||
/** | ||
* Base class for components created with `liftHtml` function. | ||
* | ||
* You probably don't need to use this class directly, it helps with type-safety | ||
* inside `liftHtml` function. | ||
*/ | ||
export declare abstract class LiftBaseClass<TAttributes extends Attributes, T extends LiftOptions<TAttributes>> extends HTMLElement_ { | ||
/** internal property to override attributeChangedCallback */ | ||
abstract acb: ((attrName: string, newValue: string | null) => void) | undefined; | ||
abstract readonly options: T; | ||
static readonly formAssociated: boolean | undefined; | ||
static readonly observedAttributes: Attributes; | ||
abstract attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void; | ||
abstract connectedCallback(): void; | ||
abstract disconnectedCallback(): void; | ||
abstract adoptedCallback(): void; | ||
} | ||
/** | ||
* Creates a custom element. The `init` function is called when the element is | ||
@@ -50,18 +10,18 @@ * connected to the DOM, and you can safely use Solid's reactive primitives like | ||
*```ts | ||
// rendered with <hello-el name="world"></hello-el> | ||
import { liftHtml, useAttributes } from "@lift-html/solid"; | ||
import { createEffect } from "solid-js"; | ||
liftHtml("hello-el", { | ||
observedAttributes: ["name"], | ||
init() { | ||
const props = useAttributes(this); | ||
createEffect(() => { | ||
this.innerText = "Hello, " + props.name; | ||
}); | ||
}, | ||
}); | ||
* // rendered with <hello-el name="world"></hello-el> | ||
* import { liftSolid, useAttributes } from "@lift-html/solid"; | ||
* import { createEffect } from "solid-js"; | ||
* | ||
* liftSolid("hello-el", { | ||
* observedAttributes: ["name"], | ||
* init() { | ||
* const props = useAttributes(this); | ||
* createEffect(() => { | ||
* this.innerText = "Hello, " + props.name; | ||
* }); | ||
* }, | ||
* }); | ||
``` | ||
*/ | ||
export declare function liftHtml<TAttributes extends Attributes, Options extends LiftOptions<TAttributes>>(tagName: string, opts: Partial<LiftOptions<TAttributes>>): LiftBaseConstructor<TAttributes, Options>; | ||
export declare function liftSolid<TAttributes extends Attributes, Options extends LiftOptions<TAttributes>>(tagName: string, opts: Partial<LiftOptions<TAttributes>>): LiftBaseConstructor<TAttributes, Options>; | ||
/** | ||
@@ -72,65 +32,2 @@ * Makes attributes reactive. Returns an object where each key is an attribute | ||
export declare function useAttributes<TAttributes extends Attributes>(instance: LiftBaseClass<TAttributes, LiftOptions<TAttributes>>): Record<NonNullable<TAttributes>[number], string | null>; | ||
/** | ||
* Extending this interface allows you to define custom once and get | ||
* type definitions for it in Solid JSX as well as regular HTML and | ||
* sometimes other frameworks like React. | ||
* | ||
* @example | ||
* | ||
*```ts | ||
// rendered with <hello-el name="world"></hello-el> | ||
import { liftHtml } from "@lift-html/solid"; | ||
const HelloEl = liftHtml("hello-el", { | ||
init() { | ||
this.innerText = "Hello, " + this.getAttribute("name"); | ||
}, | ||
}); | ||
declare module "@lift-html/solid" { | ||
interface KnownElements { | ||
"hello-el": typeof HelloEl; | ||
} | ||
} | ||
``` | ||
*/ | ||
export interface KnownElements { | ||
} | ||
/** | ||
* Add this to your env.d.ts file to make all lift-html components | ||
* available as Solid JSX elements. You only need to do this once | ||
* per project. | ||
* | ||
* @example | ||
* ```ts | ||
* import type { Solidify, KnownElements } from "@lift-html/solid"; | ||
* | ||
* declare module "solid-js" { | ||
* namespace JSX { | ||
* interface IntrinsicElements extends Solidify<KnownElements> {} | ||
* } | ||
* } | ||
* ``` | ||
*/ | ||
export type Solidify<T> = { | ||
[K in keyof T]: JSX.HTMLAttributes<HTMLDivElement>; | ||
}; | ||
/** | ||
* Converts a type of `KnownElements` to a type that can be used in | ||
* `HTMLElementTagNameMap` to make all lift-html components available as | ||
* global HTML elements. You only need to do this once per project. | ||
* | ||
* @example | ||
* ```ts | ||
* import type { Htmlify, KnownElements } from "@lift-html/solid"; | ||
* | ||
* declare global { | ||
* interface HTMLElementTagNameMap extends Htmlify<KnownElements> {} | ||
* } | ||
* ``` | ||
*/ | ||
export type Htmlify<T> = { | ||
[K in keyof T]: HTMLElement & (T[K] extends (abstract new (...args: any) => any) ? InstanceType<T[K]> : T[K]); | ||
}; | ||
export {}; | ||
//# sourceMappingURL=mod.d.ts.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.LiftBaseClass = void 0; | ||
exports.liftHtml = liftHtml; | ||
exports.liftSolid = liftSolid; | ||
exports.useAttributes = useAttributes; | ||
const solid_js_1 = require("solid-js"); | ||
// to fix crashes in SSR/Node | ||
const HTMLElement_ = typeof HTMLElement !== "undefined" | ||
? HTMLElement | ||
: class { | ||
}; | ||
const core_1 = require("@lift-html/core"); | ||
/** | ||
* Base class for components created with `liftHtml` function. | ||
* | ||
* You probably don't need to use this class directly, it helps with type-safety | ||
* inside `liftHtml` function. | ||
*/ | ||
class LiftBaseClass extends HTMLElement_ { | ||
static formAssociated; | ||
static observedAttributes; | ||
} | ||
exports.LiftBaseClass = LiftBaseClass; | ||
/** | ||
* Creates a custom element. The `init` function is called when the element is | ||
@@ -30,54 +14,27 @@ * connected to the DOM, and you can safely use Solid's reactive primitives like | ||
*```ts | ||
// rendered with <hello-el name="world"></hello-el> | ||
import { liftHtml, useAttributes } from "@lift-html/solid"; | ||
import { createEffect } from "solid-js"; | ||
liftHtml("hello-el", { | ||
observedAttributes: ["name"], | ||
init() { | ||
const props = useAttributes(this); | ||
createEffect(() => { | ||
this.innerText = "Hello, " + props.name; | ||
}); | ||
}, | ||
}); | ||
* // rendered with <hello-el name="world"></hello-el> | ||
* import { liftSolid, useAttributes } from "@lift-html/solid"; | ||
* import { createEffect } from "solid-js"; | ||
* | ||
* liftSolid("hello-el", { | ||
* observedAttributes: ["name"], | ||
* init() { | ||
* const props = useAttributes(this); | ||
* createEffect(() => { | ||
* this.innerText = "Hello, " + props.name; | ||
* }); | ||
* }, | ||
* }); | ||
``` | ||
*/ | ||
function liftHtml(tagName, opts) { | ||
class LiftElement extends LiftBaseClass { | ||
acb = undefined; | ||
options = opts; | ||
static observedAttributes = opts.observedAttributes; | ||
static formAssociated = opts.formAssociated; | ||
attributeChangedCallback(attrName, _oldValue, newValue) { | ||
this.acb?.(attrName, newValue); | ||
} | ||
connectedCallback() { | ||
this.cb(true); | ||
} | ||
adoptedCallback() { | ||
this.cb(true); | ||
} | ||
disconnectedCallback() { | ||
this.cb(); | ||
this.acb = undefined; | ||
} | ||
cleanup = []; | ||
/** This callback is called to connect or disconnect the component. */ | ||
cb(connect) { | ||
while (this.cleanup.length) { | ||
this.cleanup.pop()(); | ||
} | ||
if (this.isConnected && connect) { | ||
(0, solid_js_1.createRoot)((dispose) => { | ||
this.cleanup.push(dispose); | ||
opts.init?.call(this); | ||
}); | ||
} | ||
} | ||
} | ||
if (typeof customElements !== "undefined" && !customElements.get(tagName)) { | ||
customElements.define(tagName, LiftElement); | ||
} | ||
return LiftElement; | ||
function liftSolid(tagName, opts) { | ||
return (0, core_1.liftHtml)(tagName, { | ||
...opts, | ||
init(onCleanup) { | ||
(0, solid_js_1.createRoot)((dispose) => { | ||
opts.init?.call(this, onCleanup); | ||
onCleanup(dispose); | ||
}); | ||
}, | ||
}); | ||
} | ||
@@ -84,0 +41,0 @@ /** |
232
src/mod.ts
@@ -1,65 +0,21 @@ | ||
import { createRoot, createSignal, type JSX } from "solid-js"; | ||
export type { | ||
Attributes, | ||
Htmlify, | ||
KnownElements, | ||
LiftBaseClass, | ||
LiftBaseConstructor, | ||
LiftOptions, | ||
Reactify, | ||
Solidify, | ||
} from "@lift-html/core"; | ||
import { createRoot, createSignal } from "solid-js"; | ||
import { | ||
type Attributes, | ||
type LiftBaseClass, | ||
type LiftBaseConstructor, | ||
liftHtml, | ||
type LiftOptions, | ||
} from "@lift-html/core"; | ||
// to fix crashes in SSR/Node | ||
const HTMLElement_ = typeof HTMLElement !== "undefined" | ||
? HTMLElement | ||
: (class {} as unknown as typeof HTMLElement); | ||
export type Attributes = ReadonlyArray<string> | undefined; | ||
/** | ||
* Options for `liftHtml` function. | ||
* | ||
* This is the main way to configure your component. | ||
*/ | ||
export interface LiftOptions<TAttributes extends Attributes> { | ||
observedAttributes: TAttributes; | ||
formAssociated?: boolean | undefined; | ||
init(this: LiftBaseClass<TAttributes, LiftOptions<TAttributes>>): void; | ||
} | ||
/** | ||
* Type returned by `liftHtml` function. | ||
* | ||
* You probably don't need to use this type directly, but it provides a better | ||
* type-safety when using `liftHtml` function. | ||
*/ | ||
export interface LiftBaseConstructor< | ||
TAttributes extends Attributes, | ||
Options extends LiftOptions<TAttributes>, | ||
> { | ||
new (): LiftBaseClass<TAttributes, Options>; | ||
} | ||
/** | ||
* Base class for components created with `liftHtml` function. | ||
* | ||
* You probably don't need to use this class directly, it helps with type-safety | ||
* inside `liftHtml` function. | ||
*/ | ||
export abstract class LiftBaseClass< | ||
TAttributes extends Attributes, | ||
T extends LiftOptions<TAttributes>, | ||
> extends HTMLElement_ { | ||
/** internal property to override attributeChangedCallback */ | ||
abstract acb: | ||
| (( | ||
attrName: string, | ||
newValue: string | null, | ||
) => void) | ||
| undefined; | ||
abstract readonly options: T; | ||
static readonly formAssociated: boolean | undefined; | ||
static readonly observedAttributes: Attributes; | ||
abstract attributeChangedCallback( | ||
attrName: string, | ||
oldValue: string | null, | ||
newValue: string | null, | ||
): void; | ||
abstract connectedCallback(): void; | ||
abstract disconnectedCallback(): void; | ||
abstract adoptedCallback(): void; | ||
} | ||
/** | ||
* Creates a custom element. The `init` function is called when the element is | ||
@@ -71,18 +27,18 @@ * connected to the DOM, and you can safely use Solid's reactive primitives like | ||
*```ts | ||
// rendered with <hello-el name="world"></hello-el> | ||
import { liftHtml, useAttributes } from "@lift-html/solid"; | ||
import { createEffect } from "solid-js"; | ||
liftHtml("hello-el", { | ||
observedAttributes: ["name"], | ||
init() { | ||
const props = useAttributes(this); | ||
createEffect(() => { | ||
this.innerText = "Hello, " + props.name; | ||
}); | ||
}, | ||
}); | ||
* // rendered with <hello-el name="world"></hello-el> | ||
* import { liftSolid, useAttributes } from "@lift-html/solid"; | ||
* import { createEffect } from "solid-js"; | ||
* | ||
* liftSolid("hello-el", { | ||
* observedAttributes: ["name"], | ||
* init() { | ||
* const props = useAttributes(this); | ||
* createEffect(() => { | ||
* this.innerText = "Hello, " + props.name; | ||
* }); | ||
* }, | ||
* }); | ||
``` | ||
*/ | ||
export function liftHtml< | ||
export function liftSolid< | ||
TAttributes extends Attributes, | ||
@@ -94,47 +50,11 @@ Options extends LiftOptions<TAttributes>, | ||
): LiftBaseConstructor<TAttributes, Options> { | ||
class LiftElement extends LiftBaseClass<TAttributes, Options> { | ||
public acb: | ||
| (( | ||
attrName: string, | ||
newValue: string | null, | ||
) => void) | ||
| undefined = undefined; | ||
override options = opts as Options; | ||
static override observedAttributes = opts.observedAttributes; | ||
static override formAssociated = opts.formAssociated; | ||
override attributeChangedCallback( | ||
attrName: string, | ||
_oldValue: string | null, | ||
newValue: string | null, | ||
) { | ||
this.acb?.(attrName, newValue); | ||
} | ||
override connectedCallback() { | ||
this.cb(true); | ||
} | ||
override adoptedCallback() { | ||
this.cb(true); | ||
} | ||
override disconnectedCallback() { | ||
this.cb(); | ||
this.acb = undefined; | ||
} | ||
cleanup = [] as (() => void)[]; | ||
/** This callback is called to connect or disconnect the component. */ | ||
cb(connect?: true | undefined) { | ||
while (this.cleanup.length) { | ||
this.cleanup.pop()!(); | ||
} | ||
if (this.isConnected && connect) { | ||
createRoot((dispose) => { | ||
this.cleanup.push(dispose); | ||
opts.init?.call(this); | ||
}); | ||
} | ||
} | ||
} | ||
if (typeof customElements !== "undefined" && !customElements.get(tagName)) { | ||
customElements.define(tagName, LiftElement); | ||
} | ||
return LiftElement; | ||
return liftHtml(tagName, { | ||
...opts, | ||
init(onCleanup) { | ||
createRoot((dispose) => { | ||
opts.init?.call(this, onCleanup); | ||
onCleanup(dispose); | ||
}); | ||
}, | ||
}); | ||
} | ||
@@ -162,71 +82,1 @@ | ||
} | ||
/** | ||
* Extending this interface allows you to define custom once and get | ||
* type definitions for it in Solid JSX as well as regular HTML and | ||
* sometimes other frameworks like React. | ||
* | ||
* @example | ||
* | ||
*```ts | ||
// rendered with <hello-el name="world"></hello-el> | ||
import { liftHtml } from "@lift-html/solid"; | ||
const HelloEl = liftHtml("hello-el", { | ||
init() { | ||
this.innerText = "Hello, " + this.getAttribute("name"); | ||
}, | ||
}); | ||
declare module "@lift-html/solid" { | ||
interface KnownElements { | ||
"hello-el": typeof HelloEl; | ||
} | ||
} | ||
``` | ||
*/ | ||
// deno-lint-ignore no-empty-interface | ||
export interface KnownElements {} | ||
/** | ||
* Add this to your env.d.ts file to make all lift-html components | ||
* available as Solid JSX elements. You only need to do this once | ||
* per project. | ||
* | ||
* @example | ||
* ```ts | ||
* import type { Solidify, KnownElements } from "@lift-html/solid"; | ||
* | ||
* declare module "solid-js" { | ||
* namespace JSX { | ||
* interface IntrinsicElements extends Solidify<KnownElements> {} | ||
* } | ||
* } | ||
* ``` | ||
*/ | ||
export type Solidify<T> = { | ||
[K in keyof T]: JSX.HTMLAttributes<HTMLDivElement>; | ||
}; | ||
/** | ||
* Converts a type of `KnownElements` to a type that can be used in | ||
* `HTMLElementTagNameMap` to make all lift-html components available as | ||
* global HTML elements. You only need to do this once per project. | ||
* | ||
* @example | ||
* ```ts | ||
* import type { Htmlify, KnownElements } from "@lift-html/solid"; | ||
* | ||
* declare global { | ||
* interface HTMLElementTagNameMap extends Htmlify<KnownElements> {} | ||
* } | ||
* ``` | ||
*/ | ||
export type Htmlify<T> = { | ||
[K in keyof T]: | ||
& HTMLElement | ||
// deno-lint-ignore no-explicit-any | ||
& (T[K] extends (abstract new (...args: any) => any) ? InstanceType<T[K]> | ||
: T[K]); | ||
}; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Wildcard dependency
QualityPackage has a dependency with a floating version range. This can cause issues if the dependency publishes a new major version.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
No contributors or author data
MaintenancePackage does not specify a list of contributors or an author in package.json.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
20365
2
3
247
1
4
1
+ Added@lift-html/core@*
+ Added@lift-html/core@0.0.1(transitive)