Skip to content
This repository has been archived by the owner on Nov 6, 2019. It is now read-only.

Add support for React-like custom element functions #281

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Add support for React-like custom element functions #281

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
69226ef
Support React-like interface for functional components/elements
gnestor Jun 7, 2017
7db3e33
Define global element types to JSX namespace
gnestor Jun 7, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 120 additions & 0 deletions packages/virtualdom/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,115 @@ import {
} from '@phosphor/algorithm';


/**
* Define global element types to JSX namespace.
*/
declare global {
namespace JSX {
interface IntrinsicElements {
a: ElementAttrs;
abbr: ElementAttrs;
address: ElementAttrs;
area: ElementAttrs;
article: ElementAttrs;
aside: ElementAttrs;
audio: ElementAttrs;
b: ElementAttrs;
bdi: ElementAttrs;
bdo: ElementAttrs;
blockquote: ElementAttrs;
br: ElementAttrs;
button: ElementAttrs;
canvas: ElementAttrs;
caption: ElementAttrs;
cite: ElementAttrs;
code: ElementAttrs;
col: ElementAttrs;
colgroup: ElementAttrs;
data: ElementAttrs;
datalist: ElementAttrs;
dd: ElementAttrs;
del: ElementAttrs;
dfn: ElementAttrs;
div: ElementAttrs;
dl: ElementAttrs;
dt: ElementAttrs;
em: ElementAttrs;
embed: ElementAttrs;
fieldset: ElementAttrs;
figcaption: ElementAttrs;
figure: ElementAttrs;
footer: ElementAttrs;
form: ElementAttrs;
h1: ElementAttrs;
h2: ElementAttrs;
h3: ElementAttrs;
h4: ElementAttrs;
h5: ElementAttrs;
h6: ElementAttrs;
header: ElementAttrs;
hr: ElementAttrs;
i: ElementAttrs;
iframe: ElementAttrs;
img: ElementAttrs;
input: ElementAttrs;
ins: ElementAttrs;
kbd: ElementAttrs;
label: ElementAttrs;
legend: ElementAttrs;
li: ElementAttrs;
main: ElementAttrs;
map: ElementAttrs;
mark: ElementAttrs;
meter: ElementAttrs;
nav: ElementAttrs;
noscript: ElementAttrs;
object: ElementAttrs;
ol: ElementAttrs;
optgroup: ElementAttrs;
option: ElementAttrs;
output: ElementAttrs;
p: ElementAttrs;
param: ElementAttrs;
pre: ElementAttrs;
progress: ElementAttrs;
q: ElementAttrs;
rp: ElementAttrs;
rt: ElementAttrs;
ruby: ElementAttrs;
s: ElementAttrs;
samp: ElementAttrs;
section: ElementAttrs;
select: ElementAttrs;
small: ElementAttrs;
source: ElementAttrs;
span: ElementAttrs;
strong: ElementAttrs;
sub: ElementAttrs;
summary: ElementAttrs;
sup: ElementAttrs;
table: ElementAttrs;
tbody: ElementAttrs;
td: ElementAttrs;
textarea: ElementAttrs;
tfoot: ElementAttrs;
th: ElementAttrs;
thead: ElementAttrs;
time: ElementAttrs;
title: ElementAttrs;
tr: ElementAttrs;
track: ElementAttrs;
u: ElementAttrs;
ul: ElementAttrs;
var_: ElementAttrs;
video: ElementAttrs;
wbr: ElementAttrs;
}
interface Element extends VirtualElement { }
}
}


/**
* The names of the supported HTML5 DOM element attributes.
*
Expand Down Expand Up @@ -649,6 +758,11 @@ type ElementSpecialAttrs = {
* The inline style for the rendered DOM element.
*/
readonly style?: ElementInlineStyle;

/**
* The children attribute for functional custom elements.
*/
children?: ReadonlyArray<VirtualNode>;
};


Expand Down Expand Up @@ -1020,6 +1134,12 @@ namespace Private {
if (node.type === 'text') {
return document.createTextNode(node.content);
}

// If node is a function, call if with its attrs to return a VirtualNode.
if (typeof node.tag === 'function') {
node.attrs.children = node.children;
node = node.tag(node.attrs) as VirtualElement;
}

// Create the HTML element with the specified tag.
let element = document.createElement(node.tag);
Expand Down