Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@lift-html/solid

Package Overview
Dependencies
Maintainers
0
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@lift-html/solid - npm Package Compare versions

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

89

esm/mod.js
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 @@ /**

@@ -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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc