[FRONT COMPONENTS] Move to twenty-sdk (#17587)
Move front components from twenty-shared to twenty-sdk
This commit is contained in:
Raphaël Bosi
@@ -1,5 +1,5 @@
|
||||
import { type ApplicationVariables } from '@/sdk';
|
||||
import { type SyncableEntityOptions } from '@/application/syncableEntityOptionsType';
|
||||
import { type ApplicationVariables } from './applicationVariablesType';
|
||||
import { type SyncableEntityOptions } from './syncableEntityOptionsType';
|
||||
|
||||
export type ApplicationMarketplaceData = {
|
||||
author?: string;
|
||||
|
||||
@@ -1,14 +1,12 @@
|
||||
import {
|
||||
type PackageJson,
|
||||
type ApplicationManifest,
|
||||
type ObjectManifest,
|
||||
type LogicFunctionManifest,
|
||||
type AssetManifest,
|
||||
type FrontComponentManifest,
|
||||
type RoleManifest,
|
||||
type FieldManifest,
|
||||
} from '@/sdk';
|
||||
import { type Sources } from '@/types';
|
||||
import { type ApplicationManifest } from './applicationType';
|
||||
import { type AssetManifest } from './assetManifestType';
|
||||
import { type FieldManifest } from './fieldManifestType';
|
||||
import { type FrontComponentManifest } from './frontComponentManifestType';
|
||||
import { type LogicFunctionManifest } from './logicFunctionManifestType';
|
||||
import { type ObjectManifest } from './objectManifestType';
|
||||
import { type PackageJson } from './packageJsonType';
|
||||
import { type RoleManifest } from './roleManifestType';
|
||||
|
||||
export type Manifest = {
|
||||
application: ApplicationManifest;
|
||||
|
||||
@@ -1,148 +0,0 @@
|
||||
type PropertySchema = {
|
||||
type: 'string' | 'number' | 'boolean';
|
||||
optional: boolean;
|
||||
};
|
||||
|
||||
export type AllowedHtmlElement = {
|
||||
tag: string;
|
||||
name: string;
|
||||
properties: Record<string, PropertySchema>;
|
||||
};
|
||||
|
||||
export const ALLOWED_HTML_ELEMENTS: AllowedHtmlElement[] = [
|
||||
{ tag: 'html-div', name: 'HtmlDiv', properties: {} },
|
||||
{ tag: 'html-span', name: 'HtmlSpan', properties: {} },
|
||||
{ tag: 'html-section', name: 'HtmlSection', properties: {} },
|
||||
{ tag: 'html-article', name: 'HtmlArticle', properties: {} },
|
||||
{ tag: 'html-header', name: 'HtmlHeader', properties: {} },
|
||||
{ tag: 'html-footer', name: 'HtmlFooter', properties: {} },
|
||||
{ tag: 'html-main', name: 'HtmlMain', properties: {} },
|
||||
{ tag: 'html-nav', name: 'HtmlNav', properties: {} },
|
||||
{ tag: 'html-aside', name: 'HtmlAside', properties: {} },
|
||||
{ tag: 'html-p', name: 'HtmlP', properties: {} },
|
||||
{ tag: 'html-h1', name: 'HtmlH1', properties: {} },
|
||||
{ tag: 'html-h2', name: 'HtmlH2', properties: {} },
|
||||
{ tag: 'html-h3', name: 'HtmlH3', properties: {} },
|
||||
{ tag: 'html-h4', name: 'HtmlH4', properties: {} },
|
||||
{ tag: 'html-h5', name: 'HtmlH5', properties: {} },
|
||||
{ tag: 'html-h6', name: 'HtmlH6', properties: {} },
|
||||
{ tag: 'html-strong', name: 'HtmlStrong', properties: {} },
|
||||
{ tag: 'html-em', name: 'HtmlEm', properties: {} },
|
||||
{ tag: 'html-small', name: 'HtmlSmall', properties: {} },
|
||||
{ tag: 'html-code', name: 'HtmlCode', properties: {} },
|
||||
{ tag: 'html-pre', name: 'HtmlPre', properties: {} },
|
||||
{ tag: 'html-blockquote', name: 'HtmlBlockquote', properties: {} },
|
||||
{
|
||||
tag: 'html-a',
|
||||
name: 'HtmlA',
|
||||
properties: {
|
||||
href: { type: 'string', optional: true },
|
||||
target: { type: 'string', optional: true },
|
||||
rel: { type: 'string', optional: true },
|
||||
},
|
||||
},
|
||||
{
|
||||
tag: 'html-img',
|
||||
name: 'HtmlImg',
|
||||
properties: {
|
||||
src: { type: 'string', optional: true },
|
||||
alt: { type: 'string', optional: true },
|
||||
width: { type: 'number', optional: true },
|
||||
height: { type: 'number', optional: true },
|
||||
},
|
||||
},
|
||||
{ tag: 'html-ul', name: 'HtmlUl', properties: {} },
|
||||
{ tag: 'html-ol', name: 'HtmlOl', properties: {} },
|
||||
{ tag: 'html-li', name: 'HtmlLi', properties: {} },
|
||||
{
|
||||
tag: 'html-form',
|
||||
name: 'HtmlForm',
|
||||
properties: {
|
||||
action: { type: 'string', optional: true },
|
||||
method: { type: 'string', optional: true },
|
||||
},
|
||||
},
|
||||
{
|
||||
tag: 'html-label',
|
||||
name: 'HtmlLabel',
|
||||
properties: {
|
||||
htmlFor: { type: 'string', optional: true },
|
||||
},
|
||||
},
|
||||
{
|
||||
tag: 'html-input',
|
||||
name: 'HtmlInput',
|
||||
properties: {
|
||||
type: { type: 'string', optional: true },
|
||||
name: { type: 'string', optional: true },
|
||||
value: { type: 'string', optional: true },
|
||||
placeholder: { type: 'string', optional: true },
|
||||
disabled: { type: 'boolean', optional: true },
|
||||
checked: { type: 'boolean', optional: true },
|
||||
readOnly: { type: 'boolean', optional: true },
|
||||
},
|
||||
},
|
||||
{
|
||||
tag: 'html-textarea',
|
||||
name: 'HtmlTextarea',
|
||||
properties: {
|
||||
name: { type: 'string', optional: true },
|
||||
value: { type: 'string', optional: true },
|
||||
placeholder: { type: 'string', optional: true },
|
||||
disabled: { type: 'boolean', optional: true },
|
||||
readOnly: { type: 'boolean', optional: true },
|
||||
rows: { type: 'number', optional: true },
|
||||
cols: { type: 'number', optional: true },
|
||||
},
|
||||
},
|
||||
{
|
||||
tag: 'html-select',
|
||||
name: 'HtmlSelect',
|
||||
properties: {
|
||||
name: { type: 'string', optional: true },
|
||||
value: { type: 'string', optional: true },
|
||||
disabled: { type: 'boolean', optional: true },
|
||||
multiple: { type: 'boolean', optional: true },
|
||||
},
|
||||
},
|
||||
{
|
||||
tag: 'html-option',
|
||||
name: 'HtmlOption',
|
||||
properties: {
|
||||
value: { type: 'string', optional: true },
|
||||
disabled: { type: 'boolean', optional: true },
|
||||
selected: { type: 'boolean', optional: true },
|
||||
},
|
||||
},
|
||||
{
|
||||
tag: 'html-button',
|
||||
name: 'HtmlButton',
|
||||
properties: {
|
||||
type: { type: 'string', optional: true },
|
||||
disabled: { type: 'boolean', optional: true },
|
||||
},
|
||||
},
|
||||
{ tag: 'html-table', name: 'HtmlTable', properties: {} },
|
||||
{ tag: 'html-thead', name: 'HtmlThead', properties: {} },
|
||||
{ tag: 'html-tbody', name: 'HtmlTbody', properties: {} },
|
||||
{ tag: 'html-tfoot', name: 'HtmlTfoot', properties: {} },
|
||||
{ tag: 'html-tr', name: 'HtmlTr', properties: {} },
|
||||
{
|
||||
tag: 'html-th',
|
||||
name: 'HtmlTh',
|
||||
properties: {
|
||||
colSpan: { type: 'number', optional: true },
|
||||
rowSpan: { type: 'number', optional: true },
|
||||
},
|
||||
},
|
||||
{
|
||||
tag: 'html-td',
|
||||
name: 'HtmlTd',
|
||||
properties: {
|
||||
colSpan: { type: 'number', optional: true },
|
||||
rowSpan: { type: 'number', optional: true },
|
||||
},
|
||||
},
|
||||
{ tag: 'html-br', name: 'HtmlBr', properties: {} },
|
||||
{ tag: 'html-hr', name: 'HtmlHr', properties: {} },
|
||||
];
|
||||
@@ -1,22 +0,0 @@
|
||||
export const COMMON_HTML_EVENTS = [
|
||||
'click',
|
||||
'dblclick',
|
||||
'mousedown',
|
||||
'mouseup',
|
||||
'mouseover',
|
||||
'mouseout',
|
||||
'mouseenter',
|
||||
'mouseleave',
|
||||
'keydown',
|
||||
'keyup',
|
||||
'keypress',
|
||||
'focus',
|
||||
'blur',
|
||||
'change',
|
||||
'input',
|
||||
'submit',
|
||||
'scroll',
|
||||
'wheel',
|
||||
'contextmenu',
|
||||
'drag',
|
||||
] as const;
|
||||
@@ -1,22 +0,0 @@
|
||||
export const EVENT_TO_REACT: Record<string, string> = {
|
||||
click: 'onClick',
|
||||
dblclick: 'onDoubleClick',
|
||||
mousedown: 'onMouseDown',
|
||||
mouseup: 'onMouseUp',
|
||||
mouseover: 'onMouseOver',
|
||||
mouseout: 'onMouseOut',
|
||||
mouseenter: 'onMouseEnter',
|
||||
mouseleave: 'onMouseLeave',
|
||||
keydown: 'onKeyDown',
|
||||
keyup: 'onKeyUp',
|
||||
keypress: 'onKeyPress',
|
||||
focus: 'onFocus',
|
||||
blur: 'onBlur',
|
||||
change: 'onChange',
|
||||
input: 'onInput',
|
||||
submit: 'onSubmit',
|
||||
scroll: 'onScroll',
|
||||
wheel: 'onWheel',
|
||||
contextmenu: 'onContextMenu',
|
||||
drag: 'onDrag',
|
||||
};
|
||||
@@ -1,13 +0,0 @@
|
||||
import { type PropertySchema } from '../front-component/types/PropertySchema';
|
||||
|
||||
export const HTML_COMMON_PROPERTIES: Record<string, PropertySchema> = {
|
||||
id: { type: 'string', optional: true },
|
||||
className: { type: 'string', optional: true },
|
||||
style: { type: 'string', optional: true },
|
||||
title: { type: 'string', optional: true },
|
||||
tabIndex: { type: 'number', optional: true },
|
||||
role: { type: 'string', optional: true },
|
||||
'aria-label': { type: 'string', optional: true },
|
||||
'aria-hidden': { type: 'boolean', optional: true },
|
||||
'data-testid': { type: 'string', optional: true },
|
||||
};
|
||||
@@ -1,9 +0,0 @@
|
||||
import { ALLOWED_HTML_ELEMENTS } from './AllowedHtmlElements';
|
||||
|
||||
export const HTML_TAG_TO_REMOTE_COMPONENT: Record<string, string> =
|
||||
Object.fromEntries(
|
||||
ALLOWED_HTML_ELEMENTS.map((element) => [
|
||||
element.tag.startsWith('html-') ? element.tag.slice(5) : element.tag,
|
||||
element.name,
|
||||
]),
|
||||
);
|
||||
@@ -1,15 +0,0 @@
|
||||
/*
|
||||
* _____ _
|
||||
*|_ _|_ _____ _ __ | |_ _ _
|
||||
* | | \ \ /\ / / _ \ '_ \| __| | | | Auto-generated file
|
||||
* | | \ V V / __/ | | | |_| |_| | Any edits to this will be overridden
|
||||
* |_| \_/\_/ \___|_| |_|\__|\__, |
|
||||
* |___/
|
||||
*/
|
||||
|
||||
export type { AllowedHtmlElement } from './AllowedHtmlElements';
|
||||
export { ALLOWED_HTML_ELEMENTS } from './AllowedHtmlElements';
|
||||
export { COMMON_HTML_EVENTS } from './CommonHtmlEvents';
|
||||
export { EVENT_TO_REACT } from './EventToReact';
|
||||
export { HTML_COMMON_PROPERTIES } from './HtmlCommonProperties';
|
||||
export { HTML_TAG_TO_REMOTE_COMPONENT } from './HtmlTagToRemoteComponent';
|
||||
@@ -1,37 +0,0 @@
|
||||
import {
|
||||
type RemoteReceiver,
|
||||
RemoteRootRenderer,
|
||||
} from '@remote-dom/react/host';
|
||||
import React, { useState } from 'react';
|
||||
import { isDefined } from '../../../utils/validation/isDefined';
|
||||
import { FrontComponentWorkerEffect } from '../../remote/components/FrontComponentWorkerEffect';
|
||||
import { componentRegistry } from '../generated/host-component-registry';
|
||||
|
||||
type FrontComponentContentProps = {
|
||||
componentUrl: string;
|
||||
onError: (error?: Error) => void;
|
||||
};
|
||||
|
||||
export const FrontComponentRenderer = ({
|
||||
componentUrl,
|
||||
onError,
|
||||
}: FrontComponentContentProps) => {
|
||||
const [receiver, setReceiver] = useState<RemoteReceiver | null>(null);
|
||||
|
||||
return (
|
||||
<>
|
||||
<FrontComponentWorkerEffect
|
||||
componentUrl={componentUrl}
|
||||
setReceiver={setReceiver}
|
||||
onError={onError}
|
||||
/>
|
||||
|
||||
{isDefined(receiver) && (
|
||||
<RemoteRootRenderer
|
||||
receiver={receiver}
|
||||
components={componentRegistry}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -1,396 +0,0 @@
|
||||
/*
|
||||
* _____ _
|
||||
*|_ _|_ _____ _ __ | |_ _ _
|
||||
* | | \ \ /\ / / _ \ '_ \| __| | | | Auto-generated file
|
||||
* | | \ V V / __/ | | | |_| |_| | Any edits to this will be overridden
|
||||
* |_| \_/\_/ \___|_| |_|\__|\__, |
|
||||
* |___/
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import {
|
||||
RemoteFragmentRenderer,
|
||||
createRemoteComponentRenderer,
|
||||
} from '@remote-dom/react/host';
|
||||
const INTERNAL_PROPS = new Set(['element', 'receiver', 'components']);
|
||||
|
||||
const EVENT_NAME_MAP: Record<string, string> = {
|
||||
onclick: 'onClick',
|
||||
ondblclick: 'onDoubleClick',
|
||||
onmousedown: 'onMouseDown',
|
||||
onmouseup: 'onMouseUp',
|
||||
onmouseover: 'onMouseOver',
|
||||
onmouseout: 'onMouseOut',
|
||||
onmouseenter: 'onMouseEnter',
|
||||
onmouseleave: 'onMouseLeave',
|
||||
onkeydown: 'onKeyDown',
|
||||
onkeyup: 'onKeyUp',
|
||||
onkeypress: 'onKeyPress',
|
||||
onfocus: 'onFocus',
|
||||
onblur: 'onBlur',
|
||||
onchange: 'onChange',
|
||||
oninput: 'onInput',
|
||||
onsubmit: 'onSubmit',
|
||||
onscroll: 'onScroll',
|
||||
onwheel: 'onWheel',
|
||||
oncontextmenu: 'onContextMenu',
|
||||
ondrag: 'onDrag',
|
||||
};
|
||||
|
||||
const parseStyle = (
|
||||
styleString: string | undefined,
|
||||
): React.CSSProperties | undefined => {
|
||||
if (!styleString || typeof styleString !== 'string') {
|
||||
return styleString as React.CSSProperties | undefined;
|
||||
}
|
||||
|
||||
const style: Record<string, string> = {};
|
||||
const declarations = styleString.split(';').filter(Boolean);
|
||||
|
||||
for (const declaration of declarations) {
|
||||
const colonIndex = declaration.indexOf(':');
|
||||
if (colonIndex === -1) continue;
|
||||
|
||||
const property = declaration.slice(0, colonIndex).trim();
|
||||
const value = declaration.slice(colonIndex + 1).trim();
|
||||
|
||||
const camelProperty = property.replace(/-([a-z])/g, (_, letter: string) =>
|
||||
letter.toUpperCase(),
|
||||
);
|
||||
style[camelProperty] = value;
|
||||
}
|
||||
|
||||
return style;
|
||||
};
|
||||
|
||||
const wrapEventHandler = (handler: () => void) => {
|
||||
return (_event: unknown) => {
|
||||
handler();
|
||||
};
|
||||
};
|
||||
|
||||
const filterProps = (props: Record<string, unknown>) => {
|
||||
const filtered: Record<string, unknown> = {};
|
||||
for (const [key, value] of Object.entries(props)) {
|
||||
if (INTERNAL_PROPS.has(key) || value === undefined) continue;
|
||||
|
||||
if (key === 'style') {
|
||||
filtered.style = parseStyle(value as string | undefined);
|
||||
} else {
|
||||
const normalizedKey = EVENT_NAME_MAP[key.toLowerCase()] || key;
|
||||
if (normalizedKey.startsWith('on') && typeof value === 'function') {
|
||||
filtered[normalizedKey] = wrapEventHandler(value as () => void);
|
||||
} else {
|
||||
filtered[normalizedKey] = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
return filtered;
|
||||
};
|
||||
const HtmlDivWrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('div', filterProps(props), children);
|
||||
};
|
||||
const HtmlSpanWrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('span', filterProps(props), children);
|
||||
};
|
||||
const HtmlSectionWrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('section', filterProps(props), children);
|
||||
};
|
||||
const HtmlArticleWrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('article', filterProps(props), children);
|
||||
};
|
||||
const HtmlHeaderWrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('header', filterProps(props), children);
|
||||
};
|
||||
const HtmlFooterWrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('footer', filterProps(props), children);
|
||||
};
|
||||
const HtmlMainWrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('main', filterProps(props), children);
|
||||
};
|
||||
const HtmlNavWrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('nav', filterProps(props), children);
|
||||
};
|
||||
const HtmlAsideWrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('aside', filterProps(props), children);
|
||||
};
|
||||
const HtmlPWrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('p', filterProps(props), children);
|
||||
};
|
||||
const HtmlH1Wrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('h1', filterProps(props), children);
|
||||
};
|
||||
const HtmlH2Wrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('h2', filterProps(props), children);
|
||||
};
|
||||
const HtmlH3Wrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('h3', filterProps(props), children);
|
||||
};
|
||||
const HtmlH4Wrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('h4', filterProps(props), children);
|
||||
};
|
||||
const HtmlH5Wrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('h5', filterProps(props), children);
|
||||
};
|
||||
const HtmlH6Wrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('h6', filterProps(props), children);
|
||||
};
|
||||
const HtmlStrongWrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('strong', filterProps(props), children);
|
||||
};
|
||||
const HtmlEmWrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('em', filterProps(props), children);
|
||||
};
|
||||
const HtmlSmallWrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('small', filterProps(props), children);
|
||||
};
|
||||
const HtmlCodeWrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('code', filterProps(props), children);
|
||||
};
|
||||
const HtmlPreWrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('pre', filterProps(props), children);
|
||||
};
|
||||
const HtmlBlockquoteWrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('blockquote', filterProps(props), children);
|
||||
};
|
||||
const HtmlAWrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('a', filterProps(props), children);
|
||||
};
|
||||
const HtmlImgWrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('img', filterProps(props), children);
|
||||
};
|
||||
const HtmlUlWrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('ul', filterProps(props), children);
|
||||
};
|
||||
const HtmlOlWrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('ol', filterProps(props), children);
|
||||
};
|
||||
const HtmlLiWrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('li', filterProps(props), children);
|
||||
};
|
||||
const HtmlFormWrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('form', filterProps(props), children);
|
||||
};
|
||||
const HtmlLabelWrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('label', filterProps(props), children);
|
||||
};
|
||||
const HtmlInputWrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('input', filterProps(props), children);
|
||||
};
|
||||
const HtmlTextareaWrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('textarea', filterProps(props), children);
|
||||
};
|
||||
const HtmlSelectWrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('select', filterProps(props), children);
|
||||
};
|
||||
const HtmlOptionWrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('option', filterProps(props), children);
|
||||
};
|
||||
const HtmlButtonWrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('button', filterProps(props), children);
|
||||
};
|
||||
const HtmlTableWrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('table', filterProps(props), children);
|
||||
};
|
||||
const HtmlTheadWrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('thead', filterProps(props), children);
|
||||
};
|
||||
const HtmlTbodyWrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('tbody', filterProps(props), children);
|
||||
};
|
||||
const HtmlTfootWrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('tfoot', filterProps(props), children);
|
||||
};
|
||||
const HtmlTrWrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('tr', filterProps(props), children);
|
||||
};
|
||||
const HtmlThWrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('th', filterProps(props), children);
|
||||
};
|
||||
const HtmlTdWrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('td', filterProps(props), children);
|
||||
};
|
||||
const HtmlBrWrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('br', filterProps(props), children);
|
||||
};
|
||||
const HtmlHrWrapper = ({
|
||||
children,
|
||||
...props
|
||||
}: { children?: React.ReactNode } & Record<string, unknown>) => {
|
||||
return React.createElement('hr', filterProps(props), children);
|
||||
};
|
||||
export const componentRegistry = new Map<
|
||||
string,
|
||||
ReturnType<typeof createRemoteComponentRenderer>
|
||||
>([
|
||||
['html-div', createRemoteComponentRenderer(HtmlDivWrapper)],
|
||||
['html-span', createRemoteComponentRenderer(HtmlSpanWrapper)],
|
||||
['html-section', createRemoteComponentRenderer(HtmlSectionWrapper)],
|
||||
['html-article', createRemoteComponentRenderer(HtmlArticleWrapper)],
|
||||
['html-header', createRemoteComponentRenderer(HtmlHeaderWrapper)],
|
||||
['html-footer', createRemoteComponentRenderer(HtmlFooterWrapper)],
|
||||
['html-main', createRemoteComponentRenderer(HtmlMainWrapper)],
|
||||
['html-nav', createRemoteComponentRenderer(HtmlNavWrapper)],
|
||||
['html-aside', createRemoteComponentRenderer(HtmlAsideWrapper)],
|
||||
['html-p', createRemoteComponentRenderer(HtmlPWrapper)],
|
||||
['html-h1', createRemoteComponentRenderer(HtmlH1Wrapper)],
|
||||
['html-h2', createRemoteComponentRenderer(HtmlH2Wrapper)],
|
||||
['html-h3', createRemoteComponentRenderer(HtmlH3Wrapper)],
|
||||
['html-h4', createRemoteComponentRenderer(HtmlH4Wrapper)],
|
||||
['html-h5', createRemoteComponentRenderer(HtmlH5Wrapper)],
|
||||
['html-h6', createRemoteComponentRenderer(HtmlH6Wrapper)],
|
||||
['html-strong', createRemoteComponentRenderer(HtmlStrongWrapper)],
|
||||
['html-em', createRemoteComponentRenderer(HtmlEmWrapper)],
|
||||
['html-small', createRemoteComponentRenderer(HtmlSmallWrapper)],
|
||||
['html-code', createRemoteComponentRenderer(HtmlCodeWrapper)],
|
||||
['html-pre', createRemoteComponentRenderer(HtmlPreWrapper)],
|
||||
['html-blockquote', createRemoteComponentRenderer(HtmlBlockquoteWrapper)],
|
||||
['html-a', createRemoteComponentRenderer(HtmlAWrapper)],
|
||||
['html-img', createRemoteComponentRenderer(HtmlImgWrapper)],
|
||||
['html-ul', createRemoteComponentRenderer(HtmlUlWrapper)],
|
||||
['html-ol', createRemoteComponentRenderer(HtmlOlWrapper)],
|
||||
['html-li', createRemoteComponentRenderer(HtmlLiWrapper)],
|
||||
['html-form', createRemoteComponentRenderer(HtmlFormWrapper)],
|
||||
['html-label', createRemoteComponentRenderer(HtmlLabelWrapper)],
|
||||
['html-input', createRemoteComponentRenderer(HtmlInputWrapper)],
|
||||
['html-textarea', createRemoteComponentRenderer(HtmlTextareaWrapper)],
|
||||
['html-select', createRemoteComponentRenderer(HtmlSelectWrapper)],
|
||||
['html-option', createRemoteComponentRenderer(HtmlOptionWrapper)],
|
||||
['html-button', createRemoteComponentRenderer(HtmlButtonWrapper)],
|
||||
['html-table', createRemoteComponentRenderer(HtmlTableWrapper)],
|
||||
['html-thead', createRemoteComponentRenderer(HtmlTheadWrapper)],
|
||||
['html-tbody', createRemoteComponentRenderer(HtmlTbodyWrapper)],
|
||||
['html-tfoot', createRemoteComponentRenderer(HtmlTfootWrapper)],
|
||||
['html-tr', createRemoteComponentRenderer(HtmlTrWrapper)],
|
||||
['html-th', createRemoteComponentRenderer(HtmlThWrapper)],
|
||||
['html-td', createRemoteComponentRenderer(HtmlTdWrapper)],
|
||||
['html-br', createRemoteComponentRenderer(HtmlBrWrapper)],
|
||||
['html-hr', createRemoteComponentRenderer(HtmlHrWrapper)],
|
||||
['remote-fragment', RemoteFragmentRenderer],
|
||||
]);
|
||||
@@ -1,10 +0,0 @@
|
||||
/*
|
||||
* _____ _
|
||||
*|_ _|_ _____ _ __ | |_ _ _
|
||||
* | | \ \ /\ / / _ \ '_ \| __| | | | Auto-generated file
|
||||
* | | \ V V / __/ | | | |_| |_| | Any edits to this will be overridden
|
||||
* |_| \_/\_/ \___|_| |_|\__|\__, |
|
||||
* |___/
|
||||
*/
|
||||
|
||||
export { componentRegistry } from './host-component-registry';
|
||||
@@ -1,123 +0,0 @@
|
||||
/*
|
||||
* _____ _
|
||||
*|_ _|_ _____ _ __ | |_ _ _
|
||||
* | | \ \ /\ / / _ \ '_ \| __| | | | Auto-generated file
|
||||
* | | \ V V / __/ | | | |_| |_| | Any edits to this will be overridden
|
||||
* |_| \_/\_/ \___|_| |_|\__|\__, |
|
||||
* |___/
|
||||
*/
|
||||
|
||||
export { FrontComponentRenderer } from './host/components/FrontComponentRenderer';
|
||||
export { componentRegistry } from './host/generated/host-component-registry';
|
||||
export { FrontComponentWorkerEffect } from './remote/components/FrontComponentWorkerEffect';
|
||||
export {
|
||||
HtmlDiv,
|
||||
HtmlSpan,
|
||||
HtmlSection,
|
||||
HtmlArticle,
|
||||
HtmlHeader,
|
||||
HtmlFooter,
|
||||
HtmlMain,
|
||||
HtmlNav,
|
||||
HtmlAside,
|
||||
HtmlP,
|
||||
HtmlH1,
|
||||
HtmlH2,
|
||||
HtmlH3,
|
||||
HtmlH4,
|
||||
HtmlH5,
|
||||
HtmlH6,
|
||||
HtmlStrong,
|
||||
HtmlEm,
|
||||
HtmlSmall,
|
||||
HtmlCode,
|
||||
HtmlPre,
|
||||
HtmlBlockquote,
|
||||
HtmlA,
|
||||
HtmlImg,
|
||||
HtmlUl,
|
||||
HtmlOl,
|
||||
HtmlLi,
|
||||
HtmlForm,
|
||||
HtmlLabel,
|
||||
HtmlInput,
|
||||
HtmlTextarea,
|
||||
HtmlSelect,
|
||||
HtmlOption,
|
||||
HtmlButton,
|
||||
HtmlTable,
|
||||
HtmlThead,
|
||||
HtmlTbody,
|
||||
HtmlTfoot,
|
||||
HtmlTr,
|
||||
HtmlTh,
|
||||
HtmlTd,
|
||||
HtmlBr,
|
||||
HtmlHr,
|
||||
} from './remote/generated/remote-components';
|
||||
export type {
|
||||
HtmlCommonProperties,
|
||||
HtmlCommonEvents,
|
||||
HtmlAProperties,
|
||||
HtmlImgProperties,
|
||||
HtmlFormProperties,
|
||||
HtmlLabelProperties,
|
||||
HtmlInputProperties,
|
||||
HtmlTextareaProperties,
|
||||
HtmlSelectProperties,
|
||||
HtmlOptionProperties,
|
||||
HtmlButtonProperties,
|
||||
HtmlThProperties,
|
||||
HtmlTdProperties,
|
||||
} from './remote/generated/remote-elements';
|
||||
export {
|
||||
HtmlDivElement,
|
||||
HtmlSpanElement,
|
||||
HtmlSectionElement,
|
||||
HtmlArticleElement,
|
||||
HtmlHeaderElement,
|
||||
HtmlFooterElement,
|
||||
HtmlMainElement,
|
||||
HtmlNavElement,
|
||||
HtmlAsideElement,
|
||||
HtmlPElement,
|
||||
HtmlH1Element,
|
||||
HtmlH2Element,
|
||||
HtmlH3Element,
|
||||
HtmlH4Element,
|
||||
HtmlH5Element,
|
||||
HtmlH6Element,
|
||||
HtmlStrongElement,
|
||||
HtmlEmElement,
|
||||
HtmlSmallElement,
|
||||
HtmlCodeElement,
|
||||
HtmlPreElement,
|
||||
HtmlBlockquoteElement,
|
||||
HtmlAElement,
|
||||
HtmlImgElement,
|
||||
HtmlUlElement,
|
||||
HtmlOlElement,
|
||||
HtmlLiElement,
|
||||
HtmlFormElement,
|
||||
HtmlLabelElement,
|
||||
HtmlInputElement,
|
||||
HtmlTextareaElement,
|
||||
HtmlSelectElement,
|
||||
HtmlOptionElement,
|
||||
HtmlButtonElement,
|
||||
HtmlTableElement,
|
||||
HtmlTheadElement,
|
||||
HtmlTbodyElement,
|
||||
HtmlTfootElement,
|
||||
HtmlTrElement,
|
||||
HtmlThElement,
|
||||
HtmlTdElement,
|
||||
HtmlBrElement,
|
||||
HtmlHrElement,
|
||||
RemoteRootElement,
|
||||
RemoteFragmentElement,
|
||||
} from './remote/generated/remote-elements';
|
||||
export { createRemoteWorker } from './remote/worker/createRemoteWorker';
|
||||
export type { HostToWorkerRenderContext } from './types/HostToWorkerRenderContext';
|
||||
export type { PropertySchema } from './types/PropertySchema';
|
||||
export type { WorkerExports } from './types/WorkerExports';
|
||||
-43
@@ -1,43 +0,0 @@
|
||||
import { ThreadWebWorker, release, retain } from '@quilted/threads';
|
||||
import { RemoteReceiver } from '@remote-dom/core/receivers';
|
||||
import { useEffect } from 'react';
|
||||
import { type WorkerExports } from '../../types/WorkerExports';
|
||||
import { createRemoteWorker } from '../worker/createRemoteWorker';
|
||||
|
||||
type FrontComponentWorkerEffectProps = {
|
||||
componentUrl: string;
|
||||
setReceiver: React.Dispatch<React.SetStateAction<RemoteReceiver | null>>;
|
||||
onError: (error?: Error) => void;
|
||||
};
|
||||
|
||||
export const FrontComponentWorkerEffect = ({
|
||||
componentUrl,
|
||||
setReceiver,
|
||||
onError,
|
||||
}: FrontComponentWorkerEffectProps) => {
|
||||
useEffect(() => {
|
||||
const newReceiver = new RemoteReceiver({ retain, release });
|
||||
|
||||
const worker = createRemoteWorker();
|
||||
|
||||
worker.onerror = (event: ErrorEvent) => {
|
||||
onError(event.error);
|
||||
};
|
||||
|
||||
const thread = new ThreadWebWorker<WorkerExports>(worker);
|
||||
|
||||
thread.imports
|
||||
.render(newReceiver.connection, { componentUrl })
|
||||
.catch((error: Error) => {
|
||||
onError(error);
|
||||
});
|
||||
|
||||
setReceiver(newReceiver);
|
||||
|
||||
return () => {
|
||||
worker.terminate();
|
||||
};
|
||||
}, [componentUrl, onError, setReceiver]);
|
||||
|
||||
return null;
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,706 +0,0 @@
|
||||
/*
|
||||
* _____ _
|
||||
*|_ _|_ _____ _ __ | |_ _ _
|
||||
* | | \ \ /\ / / _ \ '_ \| __| | | | Auto-generated file
|
||||
* | | \ V V / __/ | | | |_| |_| | Any edits to this will be overridden
|
||||
* |_| \_/\_/ \___|_| |_|\__|\__, |
|
||||
* |___/
|
||||
*/
|
||||
|
||||
import {
|
||||
createRemoteElement,
|
||||
RemoteRootElement,
|
||||
RemoteFragmentElement,
|
||||
type RemoteEvent,
|
||||
} from '@remote-dom/core/elements';
|
||||
|
||||
export type HtmlCommonProperties = {
|
||||
id?: string;
|
||||
className?: string;
|
||||
style?: string;
|
||||
title?: string;
|
||||
tabIndex?: number;
|
||||
role?: string;
|
||||
'aria-label'?: string;
|
||||
'aria-hidden'?: boolean;
|
||||
'data-testid'?: string;
|
||||
};
|
||||
export type HtmlCommonEvents = {
|
||||
click(event: RemoteEvent): void;
|
||||
dblclick(event: RemoteEvent): void;
|
||||
mousedown(event: RemoteEvent): void;
|
||||
mouseup(event: RemoteEvent): void;
|
||||
mouseover(event: RemoteEvent): void;
|
||||
mouseout(event: RemoteEvent): void;
|
||||
mouseenter(event: RemoteEvent): void;
|
||||
mouseleave(event: RemoteEvent): void;
|
||||
keydown(event: RemoteEvent): void;
|
||||
keyup(event: RemoteEvent): void;
|
||||
keypress(event: RemoteEvent): void;
|
||||
focus(event: RemoteEvent): void;
|
||||
blur(event: RemoteEvent): void;
|
||||
change(event: RemoteEvent): void;
|
||||
input(event: RemoteEvent): void;
|
||||
submit(event: RemoteEvent): void;
|
||||
scroll(event: RemoteEvent): void;
|
||||
wheel(event: RemoteEvent): void;
|
||||
contextmenu(event: RemoteEvent): void;
|
||||
drag(event: RemoteEvent): void;
|
||||
};
|
||||
|
||||
const HTML_COMMON_EVENTS_ARRAY = [
|
||||
'click',
|
||||
'dblclick',
|
||||
'mousedown',
|
||||
'mouseup',
|
||||
'mouseover',
|
||||
'mouseout',
|
||||
'mouseenter',
|
||||
'mouseleave',
|
||||
'keydown',
|
||||
'keyup',
|
||||
'keypress',
|
||||
'focus',
|
||||
'blur',
|
||||
'change',
|
||||
'input',
|
||||
'submit',
|
||||
'scroll',
|
||||
'wheel',
|
||||
'contextmenu',
|
||||
'drag',
|
||||
] as const;
|
||||
const HTML_COMMON_PROPERTIES_CONFIG = {
|
||||
id: { type: String },
|
||||
className: { type: String },
|
||||
style: { type: String },
|
||||
title: { type: String },
|
||||
tabIndex: { type: Number },
|
||||
role: { type: String },
|
||||
'aria-label': { type: String },
|
||||
'aria-hidden': { type: Boolean },
|
||||
'data-testid': { type: String },
|
||||
};
|
||||
export const HtmlDivElement = createRemoteElement<
|
||||
HtmlCommonProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: HTML_COMMON_PROPERTIES_CONFIG,
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
export const HtmlSpanElement = createRemoteElement<
|
||||
HtmlCommonProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: HTML_COMMON_PROPERTIES_CONFIG,
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
export const HtmlSectionElement = createRemoteElement<
|
||||
HtmlCommonProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: HTML_COMMON_PROPERTIES_CONFIG,
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
export const HtmlArticleElement = createRemoteElement<
|
||||
HtmlCommonProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: HTML_COMMON_PROPERTIES_CONFIG,
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
export const HtmlHeaderElement = createRemoteElement<
|
||||
HtmlCommonProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: HTML_COMMON_PROPERTIES_CONFIG,
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
export const HtmlFooterElement = createRemoteElement<
|
||||
HtmlCommonProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: HTML_COMMON_PROPERTIES_CONFIG,
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
export const HtmlMainElement = createRemoteElement<
|
||||
HtmlCommonProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: HTML_COMMON_PROPERTIES_CONFIG,
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
export const HtmlNavElement = createRemoteElement<
|
||||
HtmlCommonProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: HTML_COMMON_PROPERTIES_CONFIG,
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
export const HtmlAsideElement = createRemoteElement<
|
||||
HtmlCommonProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: HTML_COMMON_PROPERTIES_CONFIG,
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
export const HtmlPElement = createRemoteElement<
|
||||
HtmlCommonProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: HTML_COMMON_PROPERTIES_CONFIG,
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
export const HtmlH1Element = createRemoteElement<
|
||||
HtmlCommonProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: HTML_COMMON_PROPERTIES_CONFIG,
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
export const HtmlH2Element = createRemoteElement<
|
||||
HtmlCommonProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: HTML_COMMON_PROPERTIES_CONFIG,
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
export const HtmlH3Element = createRemoteElement<
|
||||
HtmlCommonProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: HTML_COMMON_PROPERTIES_CONFIG,
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
export const HtmlH4Element = createRemoteElement<
|
||||
HtmlCommonProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: HTML_COMMON_PROPERTIES_CONFIG,
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
export const HtmlH5Element = createRemoteElement<
|
||||
HtmlCommonProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: HTML_COMMON_PROPERTIES_CONFIG,
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
export const HtmlH6Element = createRemoteElement<
|
||||
HtmlCommonProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: HTML_COMMON_PROPERTIES_CONFIG,
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
export const HtmlStrongElement = createRemoteElement<
|
||||
HtmlCommonProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: HTML_COMMON_PROPERTIES_CONFIG,
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
export const HtmlEmElement = createRemoteElement<
|
||||
HtmlCommonProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: HTML_COMMON_PROPERTIES_CONFIG,
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
export const HtmlSmallElement = createRemoteElement<
|
||||
HtmlCommonProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: HTML_COMMON_PROPERTIES_CONFIG,
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
export const HtmlCodeElement = createRemoteElement<
|
||||
HtmlCommonProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: HTML_COMMON_PROPERTIES_CONFIG,
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
export const HtmlPreElement = createRemoteElement<
|
||||
HtmlCommonProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: HTML_COMMON_PROPERTIES_CONFIG,
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
export const HtmlBlockquoteElement = createRemoteElement<
|
||||
HtmlCommonProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: HTML_COMMON_PROPERTIES_CONFIG,
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
|
||||
export type HtmlAProperties = HtmlCommonProperties & {
|
||||
href?: string;
|
||||
target?: string;
|
||||
rel?: string;
|
||||
};
|
||||
|
||||
export const HtmlAElement = createRemoteElement<
|
||||
HtmlAProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: {
|
||||
...HTML_COMMON_PROPERTIES_CONFIG,
|
||||
href: { type: String },
|
||||
target: { type: String },
|
||||
rel: { type: String },
|
||||
},
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
|
||||
export type HtmlImgProperties = HtmlCommonProperties & {
|
||||
src?: string;
|
||||
alt?: string;
|
||||
width?: number;
|
||||
height?: number;
|
||||
};
|
||||
|
||||
export const HtmlImgElement = createRemoteElement<
|
||||
HtmlImgProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: {
|
||||
...HTML_COMMON_PROPERTIES_CONFIG,
|
||||
src: { type: String },
|
||||
alt: { type: String },
|
||||
width: { type: Number },
|
||||
height: { type: Number },
|
||||
},
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
export const HtmlUlElement = createRemoteElement<
|
||||
HtmlCommonProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: HTML_COMMON_PROPERTIES_CONFIG,
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
export const HtmlOlElement = createRemoteElement<
|
||||
HtmlCommonProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: HTML_COMMON_PROPERTIES_CONFIG,
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
export const HtmlLiElement = createRemoteElement<
|
||||
HtmlCommonProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: HTML_COMMON_PROPERTIES_CONFIG,
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
|
||||
export type HtmlFormProperties = HtmlCommonProperties & {
|
||||
action?: string;
|
||||
method?: string;
|
||||
};
|
||||
|
||||
export const HtmlFormElement = createRemoteElement<
|
||||
HtmlFormProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: {
|
||||
...HTML_COMMON_PROPERTIES_CONFIG,
|
||||
action: { type: String },
|
||||
method: { type: String },
|
||||
},
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
|
||||
export type HtmlLabelProperties = HtmlCommonProperties & {
|
||||
htmlFor?: string;
|
||||
};
|
||||
|
||||
export const HtmlLabelElement = createRemoteElement<
|
||||
HtmlLabelProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: {
|
||||
...HTML_COMMON_PROPERTIES_CONFIG,
|
||||
htmlFor: { type: String },
|
||||
},
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
|
||||
export type HtmlInputProperties = HtmlCommonProperties & {
|
||||
type?: string;
|
||||
name?: string;
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
disabled?: boolean;
|
||||
checked?: boolean;
|
||||
readOnly?: boolean;
|
||||
};
|
||||
|
||||
export const HtmlInputElement = createRemoteElement<
|
||||
HtmlInputProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: {
|
||||
...HTML_COMMON_PROPERTIES_CONFIG,
|
||||
type: { type: String },
|
||||
name: { type: String },
|
||||
value: { type: String },
|
||||
placeholder: { type: String },
|
||||
disabled: { type: Boolean },
|
||||
checked: { type: Boolean },
|
||||
readOnly: { type: Boolean },
|
||||
},
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
|
||||
export type HtmlTextareaProperties = HtmlCommonProperties & {
|
||||
name?: string;
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
disabled?: boolean;
|
||||
readOnly?: boolean;
|
||||
rows?: number;
|
||||
cols?: number;
|
||||
};
|
||||
|
||||
export const HtmlTextareaElement = createRemoteElement<
|
||||
HtmlTextareaProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: {
|
||||
...HTML_COMMON_PROPERTIES_CONFIG,
|
||||
name: { type: String },
|
||||
value: { type: String },
|
||||
placeholder: { type: String },
|
||||
disabled: { type: Boolean },
|
||||
readOnly: { type: Boolean },
|
||||
rows: { type: Number },
|
||||
cols: { type: Number },
|
||||
},
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
|
||||
export type HtmlSelectProperties = HtmlCommonProperties & {
|
||||
name?: string;
|
||||
value?: string;
|
||||
disabled?: boolean;
|
||||
multiple?: boolean;
|
||||
};
|
||||
|
||||
export const HtmlSelectElement = createRemoteElement<
|
||||
HtmlSelectProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: {
|
||||
...HTML_COMMON_PROPERTIES_CONFIG,
|
||||
name: { type: String },
|
||||
value: { type: String },
|
||||
disabled: { type: Boolean },
|
||||
multiple: { type: Boolean },
|
||||
},
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
|
||||
export type HtmlOptionProperties = HtmlCommonProperties & {
|
||||
value?: string;
|
||||
disabled?: boolean;
|
||||
selected?: boolean;
|
||||
};
|
||||
|
||||
export const HtmlOptionElement = createRemoteElement<
|
||||
HtmlOptionProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: {
|
||||
...HTML_COMMON_PROPERTIES_CONFIG,
|
||||
value: { type: String },
|
||||
disabled: { type: Boolean },
|
||||
selected: { type: Boolean },
|
||||
},
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
|
||||
export type HtmlButtonProperties = HtmlCommonProperties & {
|
||||
type?: string;
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
export const HtmlButtonElement = createRemoteElement<
|
||||
HtmlButtonProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: {
|
||||
...HTML_COMMON_PROPERTIES_CONFIG,
|
||||
type: { type: String },
|
||||
disabled: { type: Boolean },
|
||||
},
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
export const HtmlTableElement = createRemoteElement<
|
||||
HtmlCommonProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: HTML_COMMON_PROPERTIES_CONFIG,
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
export const HtmlTheadElement = createRemoteElement<
|
||||
HtmlCommonProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: HTML_COMMON_PROPERTIES_CONFIG,
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
export const HtmlTbodyElement = createRemoteElement<
|
||||
HtmlCommonProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: HTML_COMMON_PROPERTIES_CONFIG,
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
export const HtmlTfootElement = createRemoteElement<
|
||||
HtmlCommonProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: HTML_COMMON_PROPERTIES_CONFIG,
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
export const HtmlTrElement = createRemoteElement<
|
||||
HtmlCommonProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: HTML_COMMON_PROPERTIES_CONFIG,
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
|
||||
export type HtmlThProperties = HtmlCommonProperties & {
|
||||
colSpan?: number;
|
||||
rowSpan?: number;
|
||||
};
|
||||
|
||||
export const HtmlThElement = createRemoteElement<
|
||||
HtmlThProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: {
|
||||
...HTML_COMMON_PROPERTIES_CONFIG,
|
||||
colSpan: { type: Number },
|
||||
rowSpan: { type: Number },
|
||||
},
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
|
||||
export type HtmlTdProperties = HtmlCommonProperties & {
|
||||
colSpan?: number;
|
||||
rowSpan?: number;
|
||||
};
|
||||
|
||||
export const HtmlTdElement = createRemoteElement<
|
||||
HtmlTdProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: {
|
||||
...HTML_COMMON_PROPERTIES_CONFIG,
|
||||
colSpan: { type: Number },
|
||||
rowSpan: { type: Number },
|
||||
},
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
export const HtmlBrElement = createRemoteElement<
|
||||
HtmlCommonProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: HTML_COMMON_PROPERTIES_CONFIG,
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
export const HtmlHrElement = createRemoteElement<
|
||||
HtmlCommonProperties,
|
||||
Record<string, never>,
|
||||
Record<string, never>,
|
||||
HtmlCommonEvents
|
||||
>({
|
||||
properties: HTML_COMMON_PROPERTIES_CONFIG,
|
||||
events: [...HTML_COMMON_EVENTS_ARRAY],
|
||||
});
|
||||
customElements.define('html-div', HtmlDivElement);
|
||||
customElements.define('html-span', HtmlSpanElement);
|
||||
customElements.define('html-section', HtmlSectionElement);
|
||||
customElements.define('html-article', HtmlArticleElement);
|
||||
customElements.define('html-header', HtmlHeaderElement);
|
||||
customElements.define('html-footer', HtmlFooterElement);
|
||||
customElements.define('html-main', HtmlMainElement);
|
||||
customElements.define('html-nav', HtmlNavElement);
|
||||
customElements.define('html-aside', HtmlAsideElement);
|
||||
customElements.define('html-p', HtmlPElement);
|
||||
customElements.define('html-h1', HtmlH1Element);
|
||||
customElements.define('html-h2', HtmlH2Element);
|
||||
customElements.define('html-h3', HtmlH3Element);
|
||||
customElements.define('html-h4', HtmlH4Element);
|
||||
customElements.define('html-h5', HtmlH5Element);
|
||||
customElements.define('html-h6', HtmlH6Element);
|
||||
customElements.define('html-strong', HtmlStrongElement);
|
||||
customElements.define('html-em', HtmlEmElement);
|
||||
customElements.define('html-small', HtmlSmallElement);
|
||||
customElements.define('html-code', HtmlCodeElement);
|
||||
customElements.define('html-pre', HtmlPreElement);
|
||||
customElements.define('html-blockquote', HtmlBlockquoteElement);
|
||||
customElements.define('html-a', HtmlAElement);
|
||||
customElements.define('html-img', HtmlImgElement);
|
||||
customElements.define('html-ul', HtmlUlElement);
|
||||
customElements.define('html-ol', HtmlOlElement);
|
||||
customElements.define('html-li', HtmlLiElement);
|
||||
customElements.define('html-form', HtmlFormElement);
|
||||
customElements.define('html-label', HtmlLabelElement);
|
||||
customElements.define('html-input', HtmlInputElement);
|
||||
customElements.define('html-textarea', HtmlTextareaElement);
|
||||
customElements.define('html-select', HtmlSelectElement);
|
||||
customElements.define('html-option', HtmlOptionElement);
|
||||
customElements.define('html-button', HtmlButtonElement);
|
||||
customElements.define('html-table', HtmlTableElement);
|
||||
customElements.define('html-thead', HtmlTheadElement);
|
||||
customElements.define('html-tbody', HtmlTbodyElement);
|
||||
customElements.define('html-tfoot', HtmlTfootElement);
|
||||
customElements.define('html-tr', HtmlTrElement);
|
||||
customElements.define('html-th', HtmlThElement);
|
||||
customElements.define('html-td', HtmlTdElement);
|
||||
customElements.define('html-br', HtmlBrElement);
|
||||
customElements.define('html-hr', HtmlHrElement);
|
||||
customElements.define('remote-root', RemoteRootElement);
|
||||
customElements.define('remote-fragment', RemoteFragmentElement);
|
||||
|
||||
export { RemoteRootElement, RemoteFragmentElement };
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'html-div': InstanceType<typeof HtmlDivElement>;
|
||||
'html-span': InstanceType<typeof HtmlSpanElement>;
|
||||
'html-section': InstanceType<typeof HtmlSectionElement>;
|
||||
'html-article': InstanceType<typeof HtmlArticleElement>;
|
||||
'html-header': InstanceType<typeof HtmlHeaderElement>;
|
||||
'html-footer': InstanceType<typeof HtmlFooterElement>;
|
||||
'html-main': InstanceType<typeof HtmlMainElement>;
|
||||
'html-nav': InstanceType<typeof HtmlNavElement>;
|
||||
'html-aside': InstanceType<typeof HtmlAsideElement>;
|
||||
'html-p': InstanceType<typeof HtmlPElement>;
|
||||
'html-h1': InstanceType<typeof HtmlH1Element>;
|
||||
'html-h2': InstanceType<typeof HtmlH2Element>;
|
||||
'html-h3': InstanceType<typeof HtmlH3Element>;
|
||||
'html-h4': InstanceType<typeof HtmlH4Element>;
|
||||
'html-h5': InstanceType<typeof HtmlH5Element>;
|
||||
'html-h6': InstanceType<typeof HtmlH6Element>;
|
||||
'html-strong': InstanceType<typeof HtmlStrongElement>;
|
||||
'html-em': InstanceType<typeof HtmlEmElement>;
|
||||
'html-small': InstanceType<typeof HtmlSmallElement>;
|
||||
'html-code': InstanceType<typeof HtmlCodeElement>;
|
||||
'html-pre': InstanceType<typeof HtmlPreElement>;
|
||||
'html-blockquote': InstanceType<typeof HtmlBlockquoteElement>;
|
||||
'html-a': InstanceType<typeof HtmlAElement>;
|
||||
'html-img': InstanceType<typeof HtmlImgElement>;
|
||||
'html-ul': InstanceType<typeof HtmlUlElement>;
|
||||
'html-ol': InstanceType<typeof HtmlOlElement>;
|
||||
'html-li': InstanceType<typeof HtmlLiElement>;
|
||||
'html-form': InstanceType<typeof HtmlFormElement>;
|
||||
'html-label': InstanceType<typeof HtmlLabelElement>;
|
||||
'html-input': InstanceType<typeof HtmlInputElement>;
|
||||
'html-textarea': InstanceType<typeof HtmlTextareaElement>;
|
||||
'html-select': InstanceType<typeof HtmlSelectElement>;
|
||||
'html-option': InstanceType<typeof HtmlOptionElement>;
|
||||
'html-button': InstanceType<typeof HtmlButtonElement>;
|
||||
'html-table': InstanceType<typeof HtmlTableElement>;
|
||||
'html-thead': InstanceType<typeof HtmlTheadElement>;
|
||||
'html-tbody': InstanceType<typeof HtmlTbodyElement>;
|
||||
'html-tfoot': InstanceType<typeof HtmlTfootElement>;
|
||||
'html-tr': InstanceType<typeof HtmlTrElement>;
|
||||
'html-th': InstanceType<typeof HtmlThElement>;
|
||||
'html-td': InstanceType<typeof HtmlTdElement>;
|
||||
'html-br': InstanceType<typeof HtmlBrElement>;
|
||||
'html-hr': InstanceType<typeof HtmlHrElement>;
|
||||
'remote-root': InstanceType<typeof RemoteRootElement>;
|
||||
'remote-fragment': InstanceType<typeof RemoteFragmentElement>;
|
||||
}
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
/*
|
||||
* _____ _
|
||||
*|_ _|_ _____ _ __ | |_ _ _
|
||||
* | | \ \ /\ / / _ \ '_ \| __| | | | Auto-generated file
|
||||
* | | \ V V / __/ | | | |_| |_| | Any edits to this will be overridden
|
||||
* |_| \_/\_/ \___|_| |_|\__|\__, |
|
||||
* |___/
|
||||
*/
|
||||
|
||||
export * from './remote-elements';
|
||||
export * from './remote-components';
|
||||
@@ -1,45 +0,0 @@
|
||||
//@ts-nocheck
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
import { HtmlButton, HtmlDiv, HtmlH3, HtmlP } from '../generated/remote-components';
|
||||
|
||||
const FrontComponent = () => {
|
||||
const [clickCount, setClickCount] = useState(0);
|
||||
const [currentTime, setCurrentTime] = useState(
|
||||
new Date().toLocaleTimeString(),
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setCurrentTime(new Date().toLocaleTimeString());
|
||||
}, 1000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
return React.createElement(
|
||||
HtmlDiv,
|
||||
null,
|
||||
React.createElement(HtmlH3, null, 'Remote DOM front component'),
|
||||
React.createElement(
|
||||
HtmlP,
|
||||
null,
|
||||
'Rendered in a web worker and mirrored on the host.',
|
||||
),
|
||||
React.createElement(
|
||||
HtmlButton,
|
||||
{ onClick: () => setClickCount(clickCount + 1) },
|
||||
'Click me',
|
||||
),
|
||||
React.createElement(
|
||||
HtmlP,
|
||||
null,
|
||||
'Clicked ',
|
||||
clickCount,
|
||||
' time',
|
||||
clickCount === 1 ? '' : 's',
|
||||
),
|
||||
React.createElement(HtmlP, null, 'Current time: ', currentTime),
|
||||
);
|
||||
};
|
||||
|
||||
export default React.createElement(FrontComponent);
|
||||
@@ -1,6 +0,0 @@
|
||||
// @ts-expect-error - Vite worker inline import
|
||||
import RemoteWorker from './remote-worker?worker&inline';
|
||||
|
||||
export const createRemoteWorker = (): Worker => {
|
||||
return new RemoteWorker();
|
||||
};
|
||||
@@ -1,40 +0,0 @@
|
||||
import '@remote-dom/core/polyfill';
|
||||
import '@remote-dom/react/polyfill';
|
||||
|
||||
import '../generated/remote-elements';
|
||||
|
||||
import { ThreadWebWorker } from '@quilted/threads';
|
||||
import {
|
||||
BatchingRemoteConnection,
|
||||
type RemoteConnection,
|
||||
type RemoteRootElement,
|
||||
} from '@remote-dom/core/elements';
|
||||
import React from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import { jsx, jsxs } from 'react/jsx-runtime';
|
||||
import { type HostToWorkerRenderContext } from '../../types/HostToWorkerRenderContext';
|
||||
import { type WorkerExports } from '../../types/WorkerExports';
|
||||
import * as RemoteComponents from '../generated/remote-components';
|
||||
|
||||
(globalThis as Record<string, unknown>).React = React;
|
||||
(globalThis as Record<string, unknown>).RemoteComponents = RemoteComponents;
|
||||
(globalThis as Record<string, unknown>).jsx = jsx;
|
||||
(globalThis as Record<string, unknown>).jsxs = jsxs;
|
||||
|
||||
const render: WorkerExports['render'] = async (
|
||||
connection: RemoteConnection,
|
||||
renderContext: HostToWorkerRenderContext,
|
||||
) => {
|
||||
const batchedConnection = new BatchingRemoteConnection(connection);
|
||||
const root = document.createElement('remote-root') as RemoteRootElement;
|
||||
root.connect(batchedConnection);
|
||||
document.body.append(root);
|
||||
|
||||
/* @vite-ignore */
|
||||
const componentModule = await import(renderContext.componentUrl);
|
||||
|
||||
const reactRoot = createRoot(root);
|
||||
reactRoot.render(componentModule.default);
|
||||
};
|
||||
|
||||
ThreadWebWorker.self.export({ render });
|
||||
@@ -1,3 +0,0 @@
|
||||
export type HostToWorkerRenderContext = {
|
||||
componentUrl: string;
|
||||
};
|
||||
@@ -1,4 +0,0 @@
|
||||
export type PropertySchema = {
|
||||
type: 'string' | 'number' | 'boolean';
|
||||
optional: boolean;
|
||||
};
|
||||
@@ -1,9 +0,0 @@
|
||||
import { type RemoteConnection } from '@remote-dom/core/elements';
|
||||
import { type HostToWorkerRenderContext } from './HostToWorkerRenderContext';
|
||||
|
||||
export type WorkerExports = {
|
||||
render: (
|
||||
connection: RemoteConnection,
|
||||
context: HostToWorkerRenderContext,
|
||||
) => Promise<void>;
|
||||
};
|
||||
Reference in New Issue
Block a user