New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

hybrids

Package Overview
Dependencies
Maintainers
2
Versions
149
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

hybrids - npm Package Compare versions

Comparing version 8.2.0 to 8.2.1

9

package.json
{
"name": "hybrids",
"version": "8.2.0",
"version": "8.2.1",
"description": "A JavaScript framework for creating fully-featured web applications, components libraries, and single web components with unique declarative and functional architecture",
"type": "module",
"exports": "./src/index.js",
"exports": {
".": {
"types": "./types/index.d.ts",
"default": "./src/index.js"
}
},
"types": "types/index.d.ts",

@@ -8,0 +13,0 @@ "bin": "./cli/index.js",

@@ -17,4 +17,4 @@

* **App-like Routing** based on the graph structure of views
* **Layout Engine** making UI layouts development much faster
* **Localization** with automatic translation of the templates content
* **Layout Engine** making UI layouts development much faster
* **Hot Module Replacement** out of the box support and other DX features

@@ -136,5 +136,27 @@

### Layout Engine
Create CSS layouts in-place in templates, even without using Shadow DOM, but still keeping the encapsulation of the component's styles:
```javascript
define({
tag: "app-home-view",
content: () => html`
<template layout="column center gap:2">
<div layout="grow grid:1|max">
<h1>Home</h1>
...
</div>
<footer layout@768px="hidden">...</footer>
</template>
`
});
```
You can read more in the [Layout Engine](https://hybrids.js.org/#/component-model/layout-engine.md) section of the documentation.
### Localization
It supports automatic translation of the component's content, which makes translation seamless and easy to integrate. Additionally, it provides a way to add dynamic messages with plural forms, HTML content, or use messages outside of the template context. Also, it comes with handy CLI tool to extract messages from the source code!
The library supports automatic translation of the component's content, which makes translation seamless and easy to integrate. Additionally, it provides a way to add dynamic messages with plural forms, HTML content, or use messages outside of the template context. Also, it comes with handy CLI tool to extract messages from the source code!

@@ -161,24 +183,2 @@ ```javascript

### Layout Engine
Create CSS layouts in-place in templates, even without using Shadow DOM, but still keeping the encapsulation of the component's styles:
```javascript
define({
tag: "app-home-view",
content: () => html`
<template layout="column center gap:2">
<div layout="grow grid:1|max">
<h1>Home</h1>
...
</div>
<footer layout@768px="hidden">...</footer>
</template>
`
});
```
You can read more in the [Layout Engine](https://hybrids.js.org/#/component-model/layout-engine.md) section of the documentation.
## Community

@@ -185,0 +185,0 @@

@@ -1,2 +0,1 @@

import global from "./global.js";
import { constructors } from "./define.js";

@@ -32,3 +31,3 @@

connect(host, key, invalidate) {
const observer = new global.MutationObserver(invalidate);
const observer = new globalThis.MutationObserver(invalidate);

@@ -35,0 +34,0 @@ observer.observe(host, {

@@ -1,2 +0,1 @@

import global from "./global.js";
import * as cache from "./cache.js";

@@ -18,6 +17,7 @@ import * as emitter from "./emitter.js";

for (const key of Object.keys(prevHybrids)) {
if (key === "tag") continue;
delete HybridsElement.prototype[key];
}
} else {
HybridsElement = class extends global.HTMLElement {
HybridsElement = class extends globalThis.HTMLElement {
connectedCallback() {

@@ -142,3 +142,3 @@ for (const key of HybridsElement.settable) {

deferred.then(() => {
walkInShadow(global.document.body, (node) => {
walkInShadow(globalThis.document.body, (node) => {
if (updateQueue.has(node.constructor)) {

@@ -176,3 +176,3 @@ const prevHybrids = updateQueue.get(node.constructor);

const HybridsElement = global.customElements.get(hybrids.tag);
const HybridsElement = globalThis.customElements.get(hybrids.tag);

@@ -192,13 +192,8 @@ if (HybridsElement) {

global.customElements.define(hybrids.tag, compile(hybrids));
globalThis.customElements.define(hybrids.tag, compile(hybrids));
return hybrids;
}
function from(components, options = {}) {
const { root = "", prefix } = options;
const keys = Object.keys(components);
if (keys.length === 0) return components;
for (const key of keys) {
function from(components, { root = "", prefix } = {}) {
for (const key of Object.keys(components)) {
const hybrids = components[key];

@@ -205,0 +200,0 @@

import { getPlaceholder } from "./template/utils.js";
import global from "./global.js";
import { probablyDevMode } from "./utils.js";

@@ -16,3 +15,3 @@ import { compile } from "./template/index.js";

try {
list = global.navigator.languages || [global.navigator.language];
list = globalThis.navigator.languages || [globalThis.navigator.language];
} catch (e) {

@@ -19,0 +18,0 @@ list = [];

@@ -1,2 +0,1 @@

import global from "./global.js";
import * as cache from "./cache.js";

@@ -24,3 +23,3 @@ import { deferred, dispatch, walkInShadow } from "./utils.js";

function saveLayout(target) {
const focusEl = global.document.activeElement;
const focusEl = globalThis.document.activeElement;
focusMap.set(target, rootRouter.contains(focusEl) && focusEl);

@@ -30,3 +29,6 @@

for (const el of [global.document.documentElement, global.document.body]) {
for (const el of [
globalThis.document.documentElement,
globalThis.document.body,
]) {
map.set(el, { left: el.scrollLeft, top: el.scrollTop });

@@ -63,3 +65,3 @@ }

function restoreLayout(target) {
const activeEl = global.document.activeElement;
const activeEl = globalThis.document.activeElement;

@@ -75,3 +77,3 @@ deferred.then(() => {

const config = configs.get(target);
const state = global.history.state;
const state = globalThis.history.state;
const entry = state.find((e) => e.id === config.id);

@@ -88,4 +90,4 @@ const clear = entry && entry.params.scrollToTop;

for (const el of [
global.document.documentElement,
global.document.body,
globalThis.document.documentElement,
globalThis.document.body,
]) {

@@ -98,3 +100,3 @@ el.scrollLeft = 0;

setTimeout(() => {
global.history.scrollRestoration = "auto";
globalThis.history.scrollRestoration = "auto";
}, 0);

@@ -150,3 +152,3 @@ });

const url = new URL(temp, global.location.origin);
const url = new URL(temp, globalThis.location.origin);

@@ -255,3 +257,3 @@ for (const key of Object.keys(params)) {

function getConfigById(id) {
const Constructor = global.customElements.get(id);
const Constructor = globalThis.customElements.get(id);
return configs.get(Constructor);

@@ -269,3 +271,3 @@ }

if (!config) {
const Constructor = global.customElements.get(id);
const Constructor = globalThis.customElements.get(id);

@@ -295,3 +297,3 @@ if (!Constructor || constructors.get(Constructor) !== hybrids) {

event.stopPropagation();
global.history.go(-1);
globalThis.history.go(-1);
}

@@ -382,3 +384,3 @@ };

const state = global.history.state;
const state = globalThis.history.state;
let entry = state[0];

@@ -393,3 +395,3 @@ while (entry.id !== id && entry.nested) entry = entry.nested;

global.history.replaceState(
globalThis.history.replaceState(
[config.getEntry(params), ...state.slice(1)],

@@ -429,3 +431,3 @@ "",

url(params) {
const url = new URL("", global.location.origin);
const url = new URL("", globalThis.location.origin);

@@ -438,3 +440,3 @@ for (const key of Object.keys(params)) {

`${routerOptions.url}#@${id}${url.search}`,
global.location.origin,
globalThis.location.origin,
);

@@ -554,3 +556,3 @@ },

function getBackUrl({ nested = false, scrollToTop = false } = {}) {
const state = global.history.state;
const state = globalThis.history.state;
if (!state) return "";

@@ -608,3 +610,3 @@

function getGuardUrl(params = {}) {
const state = global.history.state;
const state = globalThis.history.state;
if (!state) return "";

@@ -624,3 +626,3 @@

function getCurrentUrl(params) {
const state = global.history.state;
const state = globalThis.history.state;
if (!state) return "";

@@ -636,3 +638,3 @@

function active(views, { stack = false } = {}) {
const state = global.history.state;
const state = globalThis.history.state;
if (!state) return false;

@@ -667,3 +669,3 @@

config = getConfigById(pathname.split("@")[1]);
url = new URL(`?${search}`, global.location.origin);
url = new URL(`?${search}`, globalThis.location.origin);
}

@@ -692,12 +694,12 @@

.composedPath()
.find((el) => el instanceof global.HTMLAnchorElement);
.find((el) => el instanceof globalThis.HTMLAnchorElement);
if (anchorEl) {
url = new URL(anchorEl.href, global.location.origin);
url = new URL(anchorEl.href, globalThis.location.origin);
}
} else {
url = new URL(event.target.action, global.location.origin);
url = new URL(event.target.action, globalThis.location.origin);
}
if (url && url.origin === global.location.origin) {
if (url && url.origin === globalThis.location.origin) {
const entry = getEntryFromURL(url);

@@ -793,3 +795,3 @@ if (entry) {

const state = [];
for (let [index, e] of global.history.state.entries()) {
for (let [index, e] of globalThis.history.state.entries()) {
let i = 0;

@@ -865,3 +867,3 @@ while (e) {

function setTransition(stack, prevStack) {
const el = global.document.documentElement;
const el = globalThis.document.documentElement;

@@ -889,3 +891,3 @@ if (!stack) {

const prevStack = stacks.get(host);
const stack = resolveStack(host, global.history.state, options);
const stack = resolveStack(host, globalThis.history.state, options);

@@ -902,4 +904,4 @@ if (options.transition) setTransition(stack, prevStack);

function navigateBack(offset, entry, nextUrl) {
const state = global.history.state;
const targetEntry = global.history.state[offset];
const state = globalThis.history.state;
const targetEntry = globalThis.history.state[offset];
const pushOffset = offset < state.length - 1 && state.length > 2 ? 1 : 0;

@@ -914,4 +916,4 @@ offset += pushOffset;

if (popStateEvent) {
global.removeEventListener("popstate", replace);
global.addEventListener("popstate", flush);
globalThis.removeEventListener("popstate", replace);
globalThis.addEventListener("popstate", flush);
}

@@ -922,3 +924,3 @@

global.history[method](nextState, "", nextUrl);
globalThis.history[method](nextState, "", nextUrl);

@@ -929,6 +931,6 @@ flush();

if (offset) {
global.removeEventListener("popstate", flush);
global.addEventListener("popstate", replace);
globalThis.removeEventListener("popstate", flush);
globalThis.addEventListener("popstate", replace);
global.history.go(-offset);
globalThis.history.go(-offset);
} else {

@@ -940,3 +942,3 @@ replace();

function navigate(entry) {
const state = global.history.state;
const state = globalThis.history.state;

@@ -958,4 +960,4 @@ let nestedEntry = entry;

global.history.scrollRestoration = "manual";
global.history.pushState([entry, ...state], "", url);
globalThis.history.scrollRestoration = "manual";
globalThis.history.pushState([entry, ...state], "", url);

@@ -988,4 +990,4 @@ flush();

const state = global.history.state;
const bootstrapURL = new URL(global.location.href);
const state = globalThis.history.state;
const bootstrapURL = new URL(globalThis.location.href);

@@ -995,3 +997,3 @@ if (!state) {

global.history.replaceState([entry], "", options.url);
globalThis.history.replaceState([entry], "", options.url);
flush();

@@ -1035,3 +1037,3 @@ } else {

global.addEventListener("popstate", flush);
globalThis.addEventListener("popstate", flush);

@@ -1043,3 +1045,3 @@ host.addEventListener("click", handleNavigate);

return () => {
global.removeEventListener("popstate", flush);
globalThis.removeEventListener("popstate", flush);

@@ -1055,6 +1057,6 @@ host.removeEventListener("click", handleNavigate);

const length = global.history.state && global.history.state.length;
const length = globalThis.history.state && globalThis.history.state.length;
if (length > 1) {
global.history.go(1 - length);
global.history.replaceState(state, "", bootstrapURL);
globalThis.history.go(1 - length);
globalThis.history.replaceState(state, "", bootstrapURL);
}

@@ -1068,3 +1070,3 @@ };

function getNestedState() {
return global.history.state
return globalThis.history.state
.map((entry) => {

@@ -1086,4 +1088,4 @@ while (entry) {

if (!getNestedState()[0]) {
const state = global.history.state;
global.history.replaceState(
const state = globalThis.history.state;
globalThis.history.replaceState(
[config.nestedRoots[0].getEntry(state[0].params), ...state.slice(1)],

@@ -1100,3 +1102,3 @@ "",

options = {
url: global.location.href.replace(/#.*$/, ""),
url: globalThis.location.href.replace(/#.*$/, ""),
params: [],

@@ -1140,3 +1142,3 @@ ...options,

let config = configs.get(host);
let entry = global.history.state[0];
let entry = globalThis.history.state[0];
let key = 0;

@@ -1143,0 +1145,0 @@

@@ -1,2 +0,1 @@

import global from "./global.js";
import * as cache from "./cache.js";

@@ -93,3 +92,3 @@ import { storePointer, deferred } from "./utils.js";

function hashCode(str) {
return global.btoa(
return globalThis.btoa(
Array.from(str).reduce(

@@ -114,3 +113,3 @@ (s, c) => (Math.imul(31, s) + c.charCodeAt(0)) | 0,

const previousKeys =
JSON.parse(global.localStorage.getItem(offlinePrefix)) || {};
JSON.parse(globalThis.localStorage.getItem(offlinePrefix)) || {};
const timestamp = getCurrentTimestamp();

@@ -121,3 +120,3 @@

if (!offlineKeys[k] && previousKeys[k] < timestamp) {
global.localStorage.removeItem(k);
globalThis.localStorage.removeItem(k);
delete previousKeys[k];

@@ -127,3 +126,3 @@ }

global.localStorage.setItem(
globalThis.localStorage.setItem(
offlinePrefix,

@@ -203,3 +202,4 @@ JSON.stringify({ ...previousKeys, ...offlineKeys }),

try {
const items = JSON.parse(global.localStorage.getItem(offlineKey)) || {};
const items =
JSON.parse(globalThis.localStorage.getItem(offlineKey)) || {};

@@ -275,3 +275,6 @@ let flush;

global.localStorage.setItem(offlineKey, JSON.stringify(items));
globalThis.localStorage.setItem(
offlineKey,
JSON.stringify(items),
);
flush = null;

@@ -278,0 +281,0 @@ });

@@ -1,2 +0,1 @@

import global from "../global.js";
import { stringifyElement, probablyDevMode } from "../utils.js";

@@ -52,7 +51,7 @@ import { get as getMessage, isLocalizeEnabled } from "../localize.js";

function createWalker(context) {
return global.document.createTreeWalker(
return globalThis.document.createTreeWalker(
context,
global.NodeFilter.SHOW_ELEMENT |
global.NodeFilter.SHOW_TEXT |
global.NodeFilter.SHOW_COMMENT,
globalThis.NodeFilter.SHOW_ELEMENT |
globalThis.NodeFilter.SHOW_TEXT |
globalThis.NodeFilter.SHOW_COMMENT,
null,

@@ -111,6 +110,6 @@ false,

let styleSheet = style;
if (!(styleSheet instanceof global.CSSStyleSheet)) {
if (!(styleSheet instanceof globalThis.CSSStyleSheet)) {
styleSheet = styleSheetsMap.get(style);
if (!styleSheet) {
styleSheet = new global.CSSStyleSheet();
styleSheet = new globalThis.CSSStyleSheet();
styleSheet.replaceSync(style);

@@ -156,7 +155,7 @@ styleSheetsMap.set(style, styleSheet);

if (!styleEl || styleEl.parentNode !== target) {
styleEl = global.document.createElement("style");
styleEl = globalThis.document.createElement("style");
styleElementMap.set(target, styleEl);
target = getTemplateEnd(target);
if (target.nodeType === global.Node.TEXT_NODE) {
if (target.nodeType === globalThis.Node.TEXT_NODE) {
target.parentNode.insertBefore(styleEl, target.nextSibling);

@@ -194,3 +193,3 @@ } else {

export function compileTemplate(rawParts, isSVG, isMsg, useLayout) {
let template = global.document.createElement("template");
let template = globalThis.document.createElement("template");
const parts = {};

@@ -212,3 +211,3 @@

const layoutTemplate = template.content.children[0];
if (layoutTemplate instanceof global.HTMLTemplateElement) {
if (layoutTemplate instanceof globalThis.HTMLTemplateElement) {
for (const attr of Array.from(layoutTemplate.attributes)) {

@@ -252,6 +251,6 @@ const value = attr.value.trim();

if (node.nodeType === global.Node.COMMENT_NODE) {
if (node.nodeType === globalThis.Node.COMMENT_NODE) {
if (PLACEHOLDER_REGEXP_EQUAL.test(node.textContent)) {
node.parentNode.insertBefore(
global.document.createTextNode(node.textContent),
globalThis.document.createTextNode(node.textContent),
node.nextSibling,

@@ -266,3 +265,3 @@ );

if (node.nodeType === global.Node.TEXT_NODE) {
if (node.nodeType === globalThis.Node.TEXT_NODE) {
let text = node.textContent;

@@ -294,3 +293,3 @@ const equal = text.match(PLACEHOLDER_REGEXP_EQUAL);

node.previousSibling &&
node.previousSibling.nodeType === global.Node.COMMENT_NODE
node.previousSibling.nodeType === globalThis.Node.COMMENT_NODE
? node.previousSibling

@@ -335,3 +334,3 @@ : "";

currentNode = currentNode.parentNode.insertBefore(
global.document.createTextNode(part),
globalThis.document.createTextNode(part),
currentNode.nextSibling,

@@ -356,3 +355,3 @@ );

/* istanbul ignore else */
if (node.nodeType === global.Node.ELEMENT_NODE) {
if (node.nodeType === globalThis.Node.ELEMENT_NODE) {
if (

@@ -372,3 +371,3 @@ !noTranslate &&

tagName.match(/.+-.+/) &&
!global.customElements.get(tagName) &&
!globalThis.customElements.get(tagName) &&
!notDefinedElements.includes(tagName)

@@ -426,3 +425,3 @@ ) {

(!isSVG &&
!(target instanceof global.SVGElement) &&
!(target instanceof globalThis.SVGElement) &&
name in target);

@@ -465,3 +464,3 @@ if (isProp) {

if (template !== meta.template) {
const fragment = global.document.importNode(template.content, true);
const fragment = globalThis.document.importNode(template.content, true);
const renderWalker = createWalker(fragment);

@@ -501,3 +500,3 @@ const markers = [];

if (target.nodeType === global.Node.TEXT_NODE) {
if (target.nodeType === globalThis.Node.TEXT_NODE) {
updateStyleElement(target);

@@ -504,0 +503,0 @@

@@ -1,7 +0,6 @@

import global from "../../global.js";
import { deferred, stringifyElement } from "../../utils.js";
let instance;
export default (global.document &&
global.document.startViewTransition !== undefined &&
export default (globalThis.document &&
globalThis.document.startViewTransition !== undefined &&
function transition(template) {

@@ -22,3 +21,3 @@ return function fn(host, target) {

global.document.startViewTransition(() => {
globalThis.document.startViewTransition(() => {
template(host, target);

@@ -25,0 +24,0 @@

@@ -1,5 +0,3 @@

import global from "../global.js";
const hasAdoptedStylesheets = !!(
global.document && global.document.adoptedStyleSheets
globalThis.document && globalThis.document.adoptedStyleSheets
);

@@ -195,7 +193,7 @@ const NUMBER_REGEXP = /^\d+$/;

if (hasAdoptedStylesheets) {
globalSheet = new global.CSSStyleSheet();
globalSheet = new globalThis.CSSStyleSheet();
} else {
const el = global.document.createElement("style");
el.appendChild(global.document.createTextNode(""));
global.document.head.appendChild(el);
const el = globalThis.document.createElement("style");
el.appendChild(globalThis.document.createTextNode(""));
globalThis.document.head.appendChild(el);

@@ -223,7 +221,7 @@ globalSheet = el.sheet;

} else {
if (root === global.document) return;
if (root === globalThis.document) return;
let el = styleElements.get(root);
if (!el) {
el = global.document.createElement("style");
el = globalThis.document.createElement("style");
root.appendChild(el);

@@ -230,0 +228,0 @@

@@ -1,2 +0,1 @@

import global from "../../global.js";
import { getMeta, removeTemplate, getTemplateEnd } from "../utils.js";

@@ -90,3 +89,3 @@

} else {
entry.placeholder = global.document.createTextNode("");
entry.placeholder = globalThis.document.createTextNode("");
previousSibling.parentNode.insertBefore(

@@ -93,0 +92,0 @@ entry.placeholder,

@@ -1,2 +0,1 @@

import global from "../../global.js";
import resolveEventListener from "./event.js";

@@ -23,3 +22,3 @@ import resolveClassList from "./class.js";

(!isSVG &&
!(target instanceof global.SVGElement) &&
!(target instanceof globalThis.SVGElement) &&
propertyName in target);

@@ -26,0 +25,0 @@ if (isProp) {

@@ -1,2 +0,1 @@

import global from "../../global.js";
import { removeTemplate } from "../utils.js";

@@ -11,3 +10,3 @@ import resolveArray, { arrayMap } from "./array.js";

if (Array.isArray(value)) return "array";
if (value instanceof global.Node) return "node";
if (value instanceof globalThis.Node) return "node";
}

@@ -14,0 +13,0 @@

@@ -1,3 +0,1 @@

import global from "../global.js";
const metaMap = new WeakMap();

@@ -23,3 +21,3 @@ export function getMeta(key) {

export function removeTemplate(target) {
if (target.nodeType === global.Node.TEXT_NODE) {
if (target.nodeType === globalThis.Node.TEXT_NODE) {
const data = metaMap.get(target);

@@ -26,0 +24,0 @@

@@ -1,3 +0,1 @@

import global from "./global.js";
const camelToDashMap = new Map();

@@ -15,3 +13,3 @@ export function camelToDash(str) {

return host.dispatchEvent(
new global.CustomEvent(eventType, { bubbles: false, ...options }),
new globalThis.CustomEvent(eventType, { bubbles: false, ...options }),
);

@@ -25,3 +23,3 @@ }

export function walkInShadow(target, cb) {
if (target.nodeType === global.Node.ELEMENT_NODE) {
if (target.nodeType === globalThis.Node.ELEMENT_NODE) {
cb(target);

@@ -34,5 +32,5 @@

const walker = global.document.createTreeWalker(
const walker = globalThis.document.createTreeWalker(
target,
global.NodeFilter.SHOW_ELEMENT,
globalThis.NodeFilter.SHOW_ELEMENT,
null,

@@ -39,0 +37,0 @@ false,

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