Skip to content

Instantly share code, notes, and snippets.

@henriquegogo

henriquegogo/ElementBuilder.js

Last active April 3, 2025 20:20
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save henriquegogo/0fb36f804b57c029ba4a7b19280bc040 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save henriquegogo/0fb36f804b57c029ba4a7b19280bc040 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. henriquegogo revised this gist Apr 3, 2025. 1 changed file with 2 additions and 7 deletions.
    9 changes: 2 additions & 7 deletions ElementBuilder.js
    View file
    Original file line number Diff line number Diff line change
    @@ -24,13 +24,8 @@ function HelloWorld(message = 'Hello World!', buttonLabel = 'Click me!') {

    return { update, dispatch } = handleEvents(
    div(
    h1({
    className: 'hello-world',
    onclick: () => update('Bye bye')
    }, message),
    button({
    onclick: () => dispatch('newdata', 'Clicked')
    }, buttonLabel)
    h1({ onclick: () => update('Bye bye') }, message),
    button({ onclick: () => dispatch('newdata', 'Clicked') }, buttonLabel)
    )
    );
    }
  2. henriquegogo revised this gist Apr 3, 2025. 1 changed file with 8 additions and 9 deletions.
    17 changes: 8 additions & 9 deletions ElementBuilder.js
    View file
    Original file line number Diff line number Diff line change
    @@ -4,9 +4,8 @@ const ElementBuilder = new Proxy({}, { get: (_, tagName) => (...args) => {
    return element;
    }});

    const EventHandler = (fn, element) => Object.assign(element || {}, {
    self: element,
    update: (newProps) => element.replaceWith(fn(newProps)),
    const EventHandler = (element, fn) => Object.assign(element || {}, {
    update: (...newProps) => element.replaceWith(fn(...newProps)),
    listen: (eventType, handler) => (element.dataset.event = "", element)
    .addEventListener(eventType, ({ detail }) => handler(detail)),
    dispatch: (eventType, detail) => document.querySelectorAll("[data-event]")
    @@ -15,23 +14,23 @@ const EventHandler = (fn, element) => Object.assign(element || {}, {

    const { div, h1, button } = ElementBuilder;

    function HelloWorld(message = 'Hello World!') {
    function HelloWorld(message = 'Hello World!', buttonLabel = 'Click me!') {
    const handleEvents = (element) => {
    const { self, listen, update } = EventHandler(HelloWorld, element);
    const { listen, update } = EventHandler(element, HelloWorld);
    listen('newdata', update);
    listen('newdata', () => console.log('gotcha!'));
    return self;
    return element;
    };

    return { update, dispatch } = handleEvents(
    div(
    h1({
    className: 'hello-world',
    onclick: () => update('Bye bye') // `update` is now inside `handleEvents`
    onclick: () => update('Bye bye')
    }, message),
    button({
    onclick: () => dispatch('newdata', 'Bye bye')
    }, 'Click here')
    onclick: () => dispatch('newdata', 'Clicked')
    }, buttonLabel)
    )
    );
    }
  3. henriquegogo revised this gist Apr 3, 2025. 1 changed file with 8 additions and 7 deletions.
    15 changes: 8 additions & 7 deletions ElementBuilder.js
    View file
    Original file line number Diff line number Diff line change
    @@ -16,23 +16,24 @@ const EventHandler = (fn, element) => Object.assign(element || {}, {
    const { div, h1, button } = ElementBuilder;

    function HelloWorld(message = 'Hello World!') {
    const handleEvents = ({ self, listen, update }) => {
    listen('newdata', update);
    listen('newdata', () => console.log('gotcha!'));
    const handleEvents = (element) => {
    const { self, listen, update } = EventHandler(HelloWorld, element);
    listen('newdata', update);
    listen('newdata', () => console.log('gotcha!'));
    return self;
    }
    };

    return handleEvents({ update, dispatch } = EventHandler(HelloWorld,
    return { update, dispatch } = handleEvents(
    div(
    h1({
    className: 'hello-world',
    onclick: () => update('Bye bye')
    onclick: () => update('Bye bye') // `update` is now inside `handleEvents`
    }, message),
    button({
    onclick: () => dispatch('newdata', 'Bye bye')
    }, 'Click here')
    )
    ));
    );
    }

    document.body.append(HelloWorld());
  4. henriquegogo revised this gist Apr 3, 2025. 1 changed file with 20 additions and 14 deletions.
    34 changes: 20 additions & 14 deletions ElementBuilder.js
    View file
    Original file line number Diff line number Diff line change
    @@ -4,29 +4,35 @@ const ElementBuilder = new Proxy({}, { get: (_, tagName) => (...args) => {
    return element;
    }});

    const EventManager = (element, fn) => ({
    update: props => element.replaceWith(fn(props)),
    const EventHandler = (fn, element) => Object.assign(element || {}, {
    self: element,
    update: (newProps) => element.replaceWith(fn(newProps)),
    listen: (eventType, handler) => (element.dataset.event = "", element)
    .addEventListener(eventType, ({ detail }) => handler(detail)),
    dispatch: (eventType, detail) => document.querySelectorAll("[data-event]")
    .forEach(el => el.dispatchEvent(new CustomEvent(eventType, { detail })))
    });

    const { div, h1 } = ElementBuilder;
    const { div, h1, button } = ElementBuilder;

    function HelloWorld(message = 'Hello World!') {
    const element = div(
    h1({
    className: 'hello-world',
    onclick: () => dispatch('newdata', 'Bye bye')
    }, message));
    const handleEvents = ({ self, listen, update }) => {
    listen('newdata', update);
    listen('newdata', () => console.log('gotcha!'));
    return self;
    }

    const { update, listen, dispatch } = EventManager(element, HelloWorld);

    listen('newdata', update);
    listen('newdata', () => console.log('gotcha!'));

    return element;
    return handleEvents({ update, dispatch } = EventHandler(HelloWorld,
    div(
    h1({
    className: 'hello-world',
    onclick: () => update('Bye bye')
    }, message),
    button({
    onclick: () => dispatch('newdata', 'Bye bye')
    }, 'Click here')
    )
    ));
    }

    document.body.append(HelloWorld());
  5. henriquegogo revised this gist Apr 3, 2025. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions ElementBuilder.js
    View file
    Original file line number Diff line number Diff line change
    @@ -19,8 +19,7 @@ function HelloWorld(message = 'Hello World!') {
    h1({
    className: 'hello-world',
    onclick: () => dispatch('newdata', 'Bye bye')
    }, message),
    () => console.log('after'));
    }, message));

    const { update, listen, dispatch } = EventManager(element, HelloWorld);

  6. henriquegogo revised this gist Apr 3, 2025. 1 changed file with 5 additions and 7 deletions.
    12 changes: 5 additions & 7 deletions ElementBuilder.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,8 @@
    const ElementBuilder = new Proxy({}, {
    get: (_, tagName) => function(...args) {
    const element = Object.assign(document.createElement(tagName), ...args);
    element.append(...args.filter(arg => arg.constructor !== Object));
    return element;
    }
    });
    const ElementBuilder = new Proxy({}, { get: (_, tagName) => (...args) => {
    const element = Object.assign(document.createElement(tagName), ...args);
    element.append(...args.filter(arg => arg.constructor !== Object));
    return element;
    }});

    const EventManager = (element, fn) => ({
    update: props => element.replaceWith(fn(props)),
  7. henriquegogo revised this gist Apr 3, 2025. 1 changed file with 2 additions and 4 deletions.
    6 changes: 2 additions & 4 deletions ElementBuilder.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,9 +1,7 @@
    const ElementBuilder = new Proxy({}, {
    get: (_, tagName) => function(...args) {
    const element = document.createElement(tagName);
    args.forEach(arg =>
    arg.constructor === Object ? Object.assign(element, arg) :
    arg.constructor === Function ? arg(element) : element.append(arg));
    const element = Object.assign(document.createElement(tagName), ...args);
    element.append(...args.filter(arg => arg.constructor !== Object));
    return element;
    }
    });
  8. henriquegogo revised this gist Apr 3, 2025. 1 changed file with 9 additions and 6 deletions.
    15 changes: 9 additions & 6 deletions ElementBuilder.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,9 @@
    const ElementBuilder = new Proxy({}, {
    get: (_, tagName) => function(...args) {
    const element = Object.assign(document.createElement(tagName), ...args);
    element.append(...args.filter(arg => arg.constructor !== Object));
    const element = document.createElement(tagName);
    args.forEach(arg =>
    arg.constructor === Object ? Object.assign(element, arg) :
    arg.constructor === Function ? arg(element) : element.append(arg));
    return element;
    }
    });
    @@ -17,18 +19,19 @@ const EventManager = (element, fn) => ({
    const { div, h1 } = ElementBuilder;

    function HelloWorld(message = 'Hello World!') {
    const container = div(
    const element = div(
    h1({
    className: 'hello-world',
    onclick: () => dispatch('newdata', 'Bye bye')
    }, message));
    }, message),
    () => console.log('after'));

    const { update, listen, dispatch } = EventManager(container, HelloWorld);
    const { update, listen, dispatch } = EventManager(element, HelloWorld);

    listen('newdata', update);
    listen('newdata', () => console.log('gotcha!'));

    return container;
    return element;
    }

    document.body.append(HelloWorld());
  9. henriquegogo revised this gist Apr 3, 2025. 2 changed files with 34 additions and 34 deletions.
    34 changes: 34 additions & 0 deletions ElementBuilder.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,34 @@
    const ElementBuilder = new Proxy({}, {
    get: (_, tagName) => function(...args) {
    const element = Object.assign(document.createElement(tagName), ...args);
    element.append(...args.filter(arg => arg.constructor !== Object));
    return element;
    }
    });

    const EventManager = (element, fn) => ({
    update: props => element.replaceWith(fn(props)),
    listen: (eventType, handler) => (element.dataset.event = "", element)
    .addEventListener(eventType, ({ detail }) => handler(detail)),
    dispatch: (eventType, detail) => document.querySelectorAll("[data-event]")
    .forEach(el => el.dispatchEvent(new CustomEvent(eventType, { detail })))
    });

    const { div, h1 } = ElementBuilder;

    function HelloWorld(message = 'Hello World!') {
    const container = div(
    h1({
    className: 'hello-world',
    onclick: () => dispatch('newdata', 'Bye bye')
    }, message));

    const { update, listen, dispatch } = EventManager(container, HelloWorld);

    listen('newdata', update);
    listen('newdata', () => console.log('gotcha!'));

    return container;
    }

    document.body.append(HelloWorld());
    34 changes: 0 additions & 34 deletions elementFunction.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,34 +0,0 @@
    const ElementCreator = new Proxy({}, {
    get: (_, tag) => function(...args) {
    const el = Object.assign(document.createElement(tag), ...args);
    el.append(...args.filter(arg => arg.constructor !== Object));
    return el;
    }
    });

    const EventsHandler = (el, fn) => ({
    update: props => el.replaceWith(fn(props)),
    listen: (ev, listener) => (el.dataset.event = "", el)
    .addEventListener(ev, ({detail}) => listener(detail)),
    dispatch: (ev, detail) => document.querySelectorAll("[data-event]")
    .forEach(el => el.dispatchEvent(new CustomEvent(ev, {detail})))
    });

    const { div, h1 } = ElementCreator;

    function HelloWorld(message = 'Hello World!') {
    const self = div(
    h1({
    className: 'hello-world',
    onclick: () => dispatch('newdata', 'Bye bye')
    }, message));

    const { update, listen, dispatch } = EventsHandler(self, HelloWorld);

    listen('newdata', update);
    listen('newdata', () => console.log('gotcha!'));

    return self;
    }

    document.body.append(HelloWorld());
  10. henriquegogo revised this gist Apr 3, 2025. 1 changed file with 16 additions and 15 deletions.
    31 changes: 16 additions & 15 deletions elementFunction.js
    View file
    Original file line number Diff line number Diff line change
    @@ -6,28 +6,29 @@ const ElementCreator = new Proxy({}, {
    }
    });

    const EventsHandler = (fn, el) => ({
    update: (newElement) => el.replaceWith(fn(newElement)),
    listen: (ev, fn) => (el.dataset.event = "", el)
    .addEventListener(ev, ({detail}) => fn(detail)),
    const EventsHandler = (el, fn) => ({
    update: props => el.replaceWith(fn(props)),
    listen: (ev, listener) => (el.dataset.event = "", el)
    .addEventListener(ev, ({detail}) => listener(detail)),
    dispatch: (ev, detail) => document.querySelectorAll("[data-event]")
    .forEach(el => el.dispatchEvent(new CustomEvent(ev, {detail})))
    .forEach(el => el.dispatchEvent(new CustomEvent(ev, {detail})))
    });

    const HelloWorld = (message = 'Hello World!') => {
    const { div, h1 } = ElementCreator;
    const el =
    div({
    const { div, h1 } = ElementCreator;

    function HelloWorld(message = 'Hello World!') {
    const self = div(
    h1({
    className: 'hello-world',
    onclick: () => dispatch('newdata', 'Bye bye')
    },
    h1(message));
    const { update, listen, dispatch } = EventsHandler(HelloWorld, el);
    }, message));

    const { update, listen, dispatch } = EventsHandler(self, HelloWorld);

    listen('newdata', newMsg => update(newMsg));
    listen('newdata', update);
    listen('newdata', () => console.log('gotcha!'));

    return el;
    return self;
    }

    document.body.append(HelloWorld());
    document.body.append(HelloWorld());
  11. henriquegogo revised this gist Apr 3, 2025. 1 changed file with 20 additions and 17 deletions.
    37 changes: 20 additions & 17 deletions elementFunction.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,30 +1,33 @@
    const ElementFunction = new Proxy({}, {
    get: (_, tag) => (...args) => {
    const dispatch = (ev, detail) => document.querySelectorAll("[data-event]")
    .forEach(el => el.dispatchEvent(new CustomEvent(ev, {detail})));
    if (tag === 'dispatch') return dispatch(...args);
    const ElementCreator = new Proxy({}, {
    get: (_, tag) => function(...args) {
    const el = Object.assign(document.createElement(tag), ...args);
    el.append(...args.filter(arg => arg.constructor !== Object));
    el.update = (newElement) => el.replaceWith(newElement);
    el.listen = (ev, fn) => (el.dataset.event = "", el)
    .addEventListener(ev, ({detail}) => fn(detail));
    el.dispatch = dispatch;
    return el;
    }
    });

    const Hello = (message = 'Hello World!') => {
    const { div, h1 } = ElementFunction;
    const { update, listen, dispatch } = el =
    const EventsHandler = (fn, el) => ({
    update: (newElement) => el.replaceWith(fn(newElement)),
    listen: (ev, fn) => (el.dataset.event = "", el)
    .addEventListener(ev, ({detail}) => fn(detail)),
    dispatch: (ev, detail) => document.querySelectorAll("[data-event]")
    .forEach(el => el.dispatchEvent(new CustomEvent(ev, {detail})))
    });

    const HelloWorld = (message = 'Hello World!') => {
    const { div, h1 } = ElementCreator;
    const el =
    div({
    className: 'hello-world',
    onclick: () => dispatch('newdata', 'Bye bye'),
    onclick: () => dispatch('newdata', 'Bye bye')
    },
    h1(message));

    listen('newdata', (newMsg) => update(Hello(newMsg)));
    h1(message));
    const { update, listen, dispatch } = EventsHandler(HelloWorld, el);

    listen('newdata', newMsg => update(newMsg));
    listen('newdata', () => console.log('gotcha!'));

    return el;
    }

    document.body.append(Hello());
    document.body.append(HelloWorld());
  12. henriquegogo revised this gist Apr 2, 2025. 2 changed files with 30 additions and 13 deletions.
    30 changes: 30 additions & 0 deletions elementFunction.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,30 @@
    const ElementFunction = new Proxy({}, {
    get: (_, tag) => (...args) => {
    const dispatch = (ev, detail) => document.querySelectorAll("[data-event]")
    .forEach(el => el.dispatchEvent(new CustomEvent(ev, {detail})));
    if (tag === 'dispatch') return dispatch(...args);
    const el = Object.assign(document.createElement(tag), ...args);
    el.append(...args.filter(arg => arg.constructor !== Object));
    el.update = (newElement) => el.replaceWith(newElement);
    el.listen = (ev, fn) => (el.dataset.event = "", el)
    .addEventListener(ev, ({detail}) => fn(detail));
    el.dispatch = dispatch;
    return el;
    }
    });

    const Hello = (message = 'Hello World!') => {
    const { div, h1 } = ElementFunction;
    const { update, listen, dispatch } = el =
    div({
    className: 'hello-world',
    onclick: () => dispatch('newdata', 'Bye bye'),
    },
    h1(message));

    listen('newdata', (newMsg) => update(Hello(newMsg)));

    return el;
    }

    document.body.append(Hello());
    13 changes: 0 additions & 13 deletions funplate.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,13 +0,0 @@
    'a abbr address area article aside audio b base bdi bdo blockquote body br \
    button canvas caption cite code col colgroup data datalist dd del details dfn \
    dialog div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 \
    h5 h6 head header hgroup hr html i iframe img input ins kbd label legend li \
    link main map mark math menu meta meter nav noscript object ol optgroup option \
    output p param picture pre progress q rp rt ruby s samp script section select \
    slot small source span strong style sub summary sup svg table tbody td \
    template textarea tfoot th thead time title tr track u ul var video wbr \
    '.split(' ').forEach(tag => window[tag] = (...args) => {
    const el = Object.assign(document.createElement(tag), ...args);
    el.append(...args.filter(arg => arg.constructor !== Object));
    return el;
    });
  13. henriquegogo created this gist Sep 1, 2024.
    13 changes: 13 additions & 0 deletions funplate.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,13 @@
    'a abbr address area article aside audio b base bdi bdo blockquote body br \
    button canvas caption cite code col colgroup data datalist dd del details dfn \
    dialog div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 \
    h5 h6 head header hgroup hr html i iframe img input ins kbd label legend li \
    link main map mark math menu meta meter nav noscript object ol optgroup option \
    output p param picture pre progress q rp rt ruby s samp script section select \
    slot small source span strong style sub summary sup svg table tbody td \
    template textarea tfoot th thead time title tr track u ul var video wbr \
    '.split(' ').forEach(tag => window[tag] = (...args) => {
    const el = Object.assign(document.createElement(tag), ...args);
    el.append(...args.filter(arg => arg.constructor !== Object));
    return el;
    });