Frontend Framework Idea

FrontendFrameworkIdea.js

let context = { components: [] };

function element(type, props, children) {
  return React.createElement(
    type,
    props,
    typeof children === 'function' ? children() : children,
  );
}
const _ = new Proxy(
  {},
  {
    get(type) {
      return (children, props) => element(type, props, children);
    },
  },
);

function render(cb) {
  context.components = [];
  cb();
  const components = <>{context.components}</>;
  context.components = [];
  return components;
}

function App() {
  return render(() => {
    _.div('title', { style: { fontSize: '20px ' } });
    _.ul(
      () => {
        ['react', 'vue'].forEach(type => _.li(type));
      },
      { class: 'list' },
    );
    _.div('something');
  });
}