v0.0.15: Function components

Added support for className and style similar to react
Cleaned up some comments
Reworked how tests are built in order to add a new test "pdf" which was a small side-project where previous mentioned bug showed up, it's an example using HTML to create a PDF for printing

.idea/.gitignore

@@ -0,0 +1,2 @@
+# Default ignored files
+/workspace.xml

.idea/codeStyles/Project.xml

@@ -0,0 +1,28 @@
+<component name="ProjectCodeStyleConfiguration">
+  <code_scheme name="Project" version="173">
+    <DBN-PSQL>
+      <case-options enabled="true">
+        <option name="KEYWORD_CASE" value="lower" />
+        <option name="FUNCTION_CASE" value="lower" />
+        <option name="PARAMETER_CASE" value="lower" />
+        <option name="DATATYPE_CASE" value="lower" />
+        <option name="OBJECT_CASE" value="preserve" />
+      </case-options>
+      <formatting-settings enabled="false" />
+    </DBN-PSQL>
+    <DBN-SQL>
+      <case-options enabled="true">
+        <option name="KEYWORD_CASE" value="lower" />
+        <option name="FUNCTION_CASE" value="lower" />
+        <option name="PARAMETER_CASE" value="lower" />
+        <option name="DATATYPE_CASE" value="lower" />
+        <option name="OBJECT_CASE" value="preserve" />
+      </case-options>
+      <formatting-settings enabled="false">
+        <option name="STATEMENT_SPACING" value="one_line" />
+        <option name="CLAUSE_CHOP_DOWN" value="chop_down_if_statement_long" />
+        <option name="ITERATION_ELEMENTS_WRAPPING" value="chop_down_if_not_single" />
+      </formatting-settings>
+    </DBN-SQL>
+  </code_scheme>
+</component>

.idea/csx.iml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/csx/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/csx/lib" />
+      <excludeFolder url="file://$MODULE_DIR$/public" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/dbnavigator.xml

@@ -0,0 +1,454 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="DBNavigator.Project.DataEditorManager">
+    <record-view-column-sorting-type value="BY_INDEX" />
+    <value-preview-text-wrapping value="true" />
+    <value-preview-pinned value="false" />
+  </component>
+  <component name="DBNavigator.Project.DataExportManager">
+    <export-instructions>
+      <create-header value="true" />
+      <quote-values-containing-separator value="true" />
+      <quote-all-values value="false" />
+      <value-separator value="" />
+      <file-name value="" />
+      <file-location value="" />
+      <scope value="GLOBAL" />
+      <destination value="FILE" />
+      <format value="EXCEL" />
+      <charset value="windows-1252" />
+    </export-instructions>
+  </component>
+  <component name="DBNavigator.Project.DatabaseBrowserManager">
+    <autoscroll-to-editor value="false" />
+    <autoscroll-from-editor value="true" />
+    <show-object-properties value="true" />
+    <loaded-nodes />
+  </component>
+  <component name="DBNavigator.Project.DatabaseFileManager">
+    <open-files />
+  </component>
+  <component name="DBNavigator.Project.EditorStateManager">
+    <last-used-providers />
+  </component>
+  <component name="DBNavigator.Project.MethodExecutionManager">
+    <method-browser />
+    <execution-history>
+      <group-entries value="true" />
+      <execution-inputs />
+    </execution-history>
+    <argument-values-cache />
+  </component>
+  <component name="DBNavigator.Project.ObjectDependencyManager">
+    <last-used-dependency-type value="INCOMING" />
+  </component>
+  <component name="DBNavigator.Project.ObjectQuickFilterManager">
+    <last-used-operator value="EQUAL" />
+    <filters />
+  </component>
+  <component name="DBNavigator.Project.ScriptExecutionManager" clear-outputs="true">
+    <recently-used-interfaces />
+  </component>
+  <component name="DBNavigator.Project.Settings">
+    <connections />
+    <browser-settings>
+      <general>
+        <display-mode value="TABBED" />
+        <navigation-history-size value="100" />
+        <show-object-details value="false" />
+      </general>
+      <filters>
+        <object-type-filter>
+          <object-type name="SCHEMA" enabled="true" />
+          <object-type name="USER" enabled="true" />
+          <object-type name="ROLE" enabled="true" />
+          <object-type name="PRIVILEGE" enabled="true" />
+          <object-type name="CHARSET" enabled="true" />
+          <object-type name="TABLE" enabled="true" />
+          <object-type name="VIEW" enabled="true" />
+          <object-type name="MATERIALIZED_VIEW" enabled="true" />
+          <object-type name="NESTED_TABLE" enabled="true" />
+          <object-type name="COLUMN" enabled="true" />
+          <object-type name="INDEX" enabled="true" />
+          <object-type name="CONSTRAINT" enabled="true" />
+          <object-type name="DATASET_TRIGGER" enabled="true" />
+          <object-type name="DATABASE_TRIGGER" enabled="true" />
+          <object-type name="SYNONYM" enabled="true" />
+          <object-type name="SEQUENCE" enabled="true" />
+          <object-type name="PROCEDURE" enabled="true" />
+          <object-type name="FUNCTION" enabled="true" />
+          <object-type name="PACKAGE" enabled="true" />
+          <object-type name="TYPE" enabled="true" />
+          <object-type name="TYPE_ATTRIBUTE" enabled="true" />
+          <object-type name="ARGUMENT" enabled="true" />
+          <object-type name="DIMENSION" enabled="true" />
+          <object-type name="CLUSTER" enabled="true" />
+          <object-type name="DBLINK" enabled="true" />
+        </object-type-filter>
+      </filters>
+      <sorting>
+        <object-type name="COLUMN" sorting-type="NAME" />
+        <object-type name="FUNCTION" sorting-type="NAME" />
+        <object-type name="PROCEDURE" sorting-type="NAME" />
+        <object-type name="ARGUMENT" sorting-type="POSITION" />
+      </sorting>
+      <default-editors>
+        <object-type name="VIEW" editor-type="SELECTION" />
+        <object-type name="PACKAGE" editor-type="SELECTION" />
+        <object-type name="TYPE" editor-type="SELECTION" />
+      </default-editors>
+    </browser-settings>
+    <navigation-settings>
+      <lookup-filters>
+        <lookup-objects>
+          <object-type name="SCHEMA" enabled="true" />
+          <object-type name="USER" enabled="false" />
+          <object-type name="ROLE" enabled="false" />
+          <object-type name="PRIVILEGE" enabled="false" />
+          <object-type name="CHARSET" enabled="false" />
+          <object-type name="TABLE" enabled="true" />
+          <object-type name="VIEW" enabled="true" />
+          <object-type name="MATERIALIZED VIEW" enabled="true" />
+          <object-type name="NESTED TABLE" enabled="false" />
+          <object-type name="COLUMN" enabled="false" />
+          <object-type name="INDEX" enabled="true" />
+          <object-type name="CONSTRAINT" enabled="true" />
+          <object-type name="DATASET TRIGGER" enabled="true" />
+          <object-type name="DATABASE TRIGGER" enabled="true" />
+          <object-type name="SYNONYM" enabled="false" />
+          <object-type name="SEQUENCE" enabled="true" />
+          <object-type name="PROCEDURE" enabled="true" />
+          <object-type name="FUNCTION" enabled="true" />
+          <object-type name="PACKAGE" enabled="true" />
+          <object-type name="TYPE" enabled="true" />
+          <object-type name="TYPE ATTRIBUTE" enabled="false" />
+          <object-type name="ARGUMENT" enabled="false" />
+          <object-type name="DIMENSION" enabled="false" />
+          <object-type name="CLUSTER" enabled="false" />
+          <object-type name="DBLINK" enabled="true" />
+        </lookup-objects>
+        <force-database-load value="false" />
+        <prompt-connection-selection value="true" />
+        <prompt-schema-selection value="true" />
+      </lookup-filters>
+    </navigation-settings>
+    <dataset-grid-settings>
+      <general>
+        <enable-zooming value="true" />
+        <enable-column-tooltip value="true" />
+      </general>
+      <sorting>
+        <nulls-first value="true" />
+        <max-sorting-columns value="4" />
+      </sorting>
+      <tracking-columns>
+        <columnNames value="" />
+        <visible value="true" />
+        <editable value="false" />
+      </tracking-columns>
+    </dataset-grid-settings>
+    <dataset-editor-settings>
+      <text-editor-popup>
+        <active value="false" />
+        <active-if-empty value="false" />
+        <data-length-threshold value="100" />
+        <popup-delay value="1000" />
+      </text-editor-popup>
+      <values-actions-popup>
+        <show-popup-button value="true" />
+        <element-count-threshold value="1000" />
+        <data-length-threshold value="250" />
+      </values-actions-popup>
+      <general>
+        <fetch-block-size value="100" />
+        <fetch-timeout value="30" />
+        <trim-whitespaces value="true" />
+        <convert-empty-strings-to-null value="true" />
+        <select-content-on-cell-edit value="true" />
+        <large-value-preview-active value="true" />
+      </general>
+      <filters>
+        <prompt-filter-dialog value="true" />
+        <default-filter-type value="BASIC" />
+      </filters>
+      <qualified-text-editor text-length-threshold="300">
+        <content-types>
+          <content-type name="Text" enabled="true" />
+          <content-type name="XML" enabled="true" />
+          <content-type name="DTD" enabled="true" />
+          <content-type name="HTML" enabled="true" />
+          <content-type name="XHTML" enabled="true" />
+          <content-type name="CSS" enabled="true" />
+          <content-type name="SQL" enabled="true" />
+          <content-type name="PL/SQL" enabled="true" />
+          <content-type name="JavaScript" enabled="true" />
+          <content-type name="ASP" enabled="true" />
+          <content-type name="YAML" enabled="true" />
+        </content-types>
+      </qualified-text-editor>
+      <record-navigation>
+        <navigation-target value="VIEWER" />
+      </record-navigation>
+    </dataset-editor-settings>
+    <code-editor-settings>
+      <general>
+        <show-object-navigation-gutter value="false" />
+        <show-spec-declaration-navigation-gutter value="true" />
+        <enable-spellchecking value="true" />
+        <enable-reference-spellchecking value="false" />
+      </general>
+      <confirmations>
+        <save-changes value="false" />
+        <revert-changes value="true" />
+      </confirmations>
+    </code-editor-settings>
+    <code-completion-settings>
+      <filters>
+        <basic-filter>
+          <filter-element type="RESERVED_WORD" id="keyword" selected="true" />
+          <filter-element type="RESERVED_WORD" id="function" selected="true" />
+          <filter-element type="RESERVED_WORD" id="parameter" selected="true" />
+          <filter-element type="RESERVED_WORD" id="datatype" selected="true" />
+          <filter-element type="RESERVED_WORD" id="exception" selected="true" />
+          <filter-element type="OBJECT" id="schema" selected="true" />
+          <filter-element type="OBJECT" id="role" selected="true" />
+          <filter-element type="OBJECT" id="user" selected="true" />
+          <filter-element type="OBJECT" id="privilege" selected="true" />
+          <user-schema>
+            <filter-element type="OBJECT" id="table" selected="true" />
+            <filter-element type="OBJECT" id="view" selected="true" />
+            <filter-element type="OBJECT" id="materialized view" selected="true" />
+            <filter-element type="OBJECT" id="index" selected="true" />
+            <filter-element type="OBJECT" id="constraint" selected="true" />
+            <filter-element type="OBJECT" id="trigger" selected="true" />
+            <filter-element type="OBJECT" id="synonym" selected="false" />
+            <filter-element type="OBJECT" id="sequence" selected="true" />
+            <filter-element type="OBJECT" id="procedure" selected="true" />
+            <filter-element type="OBJECT" id="function" selected="true" />
+            <filter-element type="OBJECT" id="package" selected="true" />
+            <filter-element type="OBJECT" id="type" selected="true" />
+            <filter-element type="OBJECT" id="dimension" selected="true" />
+            <filter-element type="OBJECT" id="cluster" selected="true" />
+            <filter-element type="OBJECT" id="dblink" selected="true" />
+          </user-schema>
+          <public-schema>
+            <filter-element type="OBJECT" id="table" selected="false" />
+            <filter-element type="OBJECT" id="view" selected="false" />
+            <filter-element type="OBJECT" id="materialized view" selected="false" />
+            <filter-element type="OBJECT" id="index" selected="false" />
+            <filter-element type="OBJECT" id="constraint" selected="false" />
+            <filter-element type="OBJECT" id="trigger" selected="false" />
+            <filter-element type="OBJECT" id="synonym" selected="false" />
+            <filter-element type="OBJECT" id="sequence" selected="false" />
+            <filter-element type="OBJECT" id="procedure" selected="false" />
+            <filter-element type="OBJECT" id="function" selected="false" />
+            <filter-element type="OBJECT" id="package" selected="false" />
+            <filter-element type="OBJECT" id="type" selected="false" />
+            <filter-element type="OBJECT" id="dimension" selected="false" />
+            <filter-element type="OBJECT" id="cluster" selected="false" />
+            <filter-element type="OBJECT" id="dblink" selected="false" />
+          </public-schema>
+          <any-schema>
+            <filter-element type="OBJECT" id="table" selected="true" />
+            <filter-element type="OBJECT" id="view" selected="true" />
+            <filter-element type="OBJECT" id="materialized view" selected="true" />
+            <filter-element type="OBJECT" id="index" selected="true" />
+            <filter-element type="OBJECT" id="constraint" selected="true" />
+            <filter-element type="OBJECT" id="trigger" selected="true" />
+            <filter-element type="OBJECT" id="synonym" selected="true" />
+            <filter-element type="OBJECT" id="sequence" selected="true" />
+            <filter-element type="OBJECT" id="procedure" selected="true" />
+            <filter-element type="OBJECT" id="function" selected="true" />
+            <filter-element type="OBJECT" id="package" selected="true" />
+            <filter-element type="OBJECT" id="type" selected="true" />
+            <filter-element type="OBJECT" id="dimension" selected="true" />
+            <filter-element type="OBJECT" id="cluster" selected="true" />
+            <filter-element type="OBJECT" id="dblink" selected="true" />
+          </any-schema>
+        </basic-filter>
+        <extended-filter>
+          <filter-element type="RESERVED_WORD" id="keyword" selected="true" />
+          <filter-element type="RESERVED_WORD" id="function" selected="true" />
+          <filter-element type="RESERVED_WORD" id="parameter" selected="true" />
+          <filter-element type="RESERVED_WORD" id="datatype" selected="true" />
+          <filter-element type="RESERVED_WORD" id="exception" selected="true" />
+          <filter-element type="OBJECT" id="schema" selected="true" />
+          <filter-element type="OBJECT" id="user" selected="true" />
+          <filter-element type="OBJECT" id="role" selected="true" />
+          <filter-element type="OBJECT" id="privilege" selected="true" />
+          <user-schema>
+            <filter-element type="OBJECT" id="table" selected="true" />
+            <filter-element type="OBJECT" id="view" selected="true" />
+            <filter-element type="OBJECT" id="materialized view" selected="true" />
+            <filter-element type="OBJECT" id="index" selected="true" />
+            <filter-element type="OBJECT" id="constraint" selected="true" />
+            <filter-element type="OBJECT" id="trigger" selected="true" />
+            <filter-element type="OBJECT" id="synonym" selected="true" />
+            <filter-element type="OBJECT" id="sequence" selected="true" />
+            <filter-element type="OBJECT" id="procedure" selected="true" />
+            <filter-element type="OBJECT" id="function" selected="true" />
+            <filter-element type="OBJECT" id="package" selected="true" />
+            <filter-element type="OBJECT" id="type" selected="true" />
+            <filter-element type="OBJECT" id="dimension" selected="true" />
+            <filter-element type="OBJECT" id="cluster" selected="true" />
+            <filter-element type="OBJECT" id="dblink" selected="true" />
+          </user-schema>
+          <public-schema>
+            <filter-element type="OBJECT" id="table" selected="true" />
+            <filter-element type="OBJECT" id="view" selected="true" />
+            <filter-element type="OBJECT" id="materialized view" selected="true" />
+            <filter-element type="OBJECT" id="index" selected="true" />
+            <filter-element type="OBJECT" id="constraint" selected="true" />
+            <filter-element type="OBJECT" id="trigger" selected="true" />
+            <filter-element type="OBJECT" id="synonym" selected="true" />
+            <filter-element type="OBJECT" id="sequence" selected="true" />
+            <filter-element type="OBJECT" id="procedure" selected="true" />
+            <filter-element type="OBJECT" id="function" selected="true" />
+            <filter-element type="OBJECT" id="package" selected="true" />
+            <filter-element type="OBJECT" id="type" selected="true" />
+            <filter-element type="OBJECT" id="dimension" selected="true" />
+            <filter-element type="OBJECT" id="cluster" selected="true" />
+            <filter-element type="OBJECT" id="dblink" selected="true" />
+          </public-schema>
+          <any-schema>
+            <filter-element type="OBJECT" id="table" selected="true" />
+            <filter-element type="OBJECT" id="view" selected="true" />
+            <filter-element type="OBJECT" id="materialized view" selected="true" />
+            <filter-element type="OBJECT" id="index" selected="true" />
+            <filter-element type="OBJECT" id="constraint" selected="true" />
+            <filter-element type="OBJECT" id="trigger" selected="true" />
+            <filter-element type="OBJECT" id="synonym" selected="true" />
+            <filter-element type="OBJECT" id="sequence" selected="true" />
+            <filter-element type="OBJECT" id="procedure" selected="true" />
+            <filter-element type="OBJECT" id="function" selected="true" />
+            <filter-element type="OBJECT" id="package" selected="true" />
+            <filter-element type="OBJECT" id="type" selected="true" />
+            <filter-element type="OBJECT" id="dimension" selected="true" />
+            <filter-element type="OBJECT" id="cluster" selected="true" />
+            <filter-element type="OBJECT" id="dblink" selected="true" />
+          </any-schema>
+        </extended-filter>
+      </filters>
+      <sorting enabled="true">
+        <sorting-element type="RESERVED_WORD" id="keyword" />
+        <sorting-element type="RESERVED_WORD" id="datatype" />
+        <sorting-element type="OBJECT" id="column" />
+        <sorting-element type="OBJECT" id="table" />
+        <sorting-element type="OBJECT" id="view" />
+        <sorting-element type="OBJECT" id="materialized view" />
+        <sorting-element type="OBJECT" id="index" />
+        <sorting-element type="OBJECT" id="constraint" />
+        <sorting-element type="OBJECT" id="trigger" />
+        <sorting-element type="OBJECT" id="synonym" />
+        <sorting-element type="OBJECT" id="sequence" />
+        <sorting-element type="OBJECT" id="procedure" />
+        <sorting-element type="OBJECT" id="function" />
+        <sorting-element type="OBJECT" id="package" />
+        <sorting-element type="OBJECT" id="type" />
+        <sorting-element type="OBJECT" id="dimension" />
+        <sorting-element type="OBJECT" id="cluster" />
+        <sorting-element type="OBJECT" id="dblink" />
+        <sorting-element type="OBJECT" id="schema" />
+        <sorting-element type="OBJECT" id="role" />
+        <sorting-element type="OBJECT" id="user" />
+        <sorting-element type="RESERVED_WORD" id="function" />
+        <sorting-element type="RESERVED_WORD" id="parameter" />
+      </sorting>
+      <format>
+        <enforce-code-style-case value="true" />
+      </format>
+    </code-completion-settings>
+    <execution-engine-settings>
+      <statement-execution>
+        <fetch-block-size value="100" />
+        <execution-timeout value="20" />
+        <debug-execution-timeout value="600" />
+        <focus-result value="false" />
+        <prompt-execution value="false" />
+      </statement-execution>
+      <script-execution>
+        <command-line-interfaces />
+        <execution-timeout value="300" />
+      </script-execution>
+      <method-execution>
+        <execution-timeout value="30" />
+        <debug-execution-timeout value="600" />
+        <parameter-history-size value="10" />
+      </method-execution>
+    </execution-engine-settings>
+    <operation-settings>
+      <transactions>
+        <uncommitted-changes>
+          <on-project-close value="ASK" />
+          <on-disconnect value="ASK" />
+          <on-autocommit-toggle value="ASK" />
+        </uncommitted-changes>
+        <multiple-uncommitted-changes>
+          <on-commit value="ASK" />
+          <on-rollback value="ASK" />
+        </multiple-uncommitted-changes>
+      </transactions>
+      <session-browser>
+        <disconnect-session value="ASK" />
+        <kill-session value="ASK" />
+        <reload-on-filter-change value="false" />
+      </session-browser>
+      <compiler>
+        <compile-type value="KEEP" />
+        <compile-dependencies value="ASK" />
+        <always-show-controls value="false" />
+      </compiler>
+      <debugger>
+        <debugger-type value="JDBC" />
+        <use-generic-runners value="true" />
+      </debugger>
+    </operation-settings>
+    <ddl-file-settings>
+      <extensions>
+        <mapping file-type-id="VIEW" extensions="vw" />
+        <mapping file-type-id="TRIGGER" extensions="trg" />
+        <mapping file-type-id="PROCEDURE" extensions="prc" />
+        <mapping file-type-id="FUNCTION" extensions="fnc" />
+        <mapping file-type-id="PACKAGE" extensions="pkg" />
+        <mapping file-type-id="PACKAGE_SPEC" extensions="pks" />
+        <mapping file-type-id="PACKAGE_BODY" extensions="pkb" />
+        <mapping file-type-id="TYPE" extensions="tpe" />
+        <mapping file-type-id="TYPE_SPEC" extensions="tps" />
+        <mapping file-type-id="TYPE_BODY" extensions="tpb" />
+      </extensions>
+      <general>
+        <lookup-ddl-files value="true" />
+        <create-ddl-files value="false" />
+        <synchronize-ddl-files value="true" />
+        <use-qualified-names value="false" />
+        <make-scripts-rerunnable value="true" />
+      </general>
+    </ddl-file-settings>
+    <general-settings>
+      <regional-settings>
+        <date-format value="MEDIUM" />
+        <number-format value="UNGROUPED" />
+        <locale value="SYSTEM_DEFAULT" />
+        <use-custom-formats value="false" />
+      </regional-settings>
+      <environment>
+        <environment-types>
+          <environment-type id="development" name="Development" description="Development environment" color="-2430209/-12296320" readonly-code="false" readonly-data="false" />
+          <environment-type id="integration" name="Integration" description="Integration environment" color="-2621494/-12163514" readonly-code="true" readonly-data="false" />
+          <environment-type id="production" name="Production" description="Productive environment" color="-11574/-10271420" readonly-code="true" readonly-data="true" />
+          <environment-type id="other" name="Other" description="" color="-1576/-10724543" readonly-code="false" readonly-data="false" />
+        </environment-types>
+        <visibility-settings>
+          <connection-tabs value="true" />
+          <dialog-headers value="true" />
+          <object-editor-tabs value="true" />
+          <script-editor-tabs value="false" />
+          <execution-result-tabs value="true" />
+        </visibility-settings>
+      </environment>
+    </general-settings>
+  </component>
+  <component name="DBNavigator.Project.StatementExecutionManager">
+    <execution-variables />
+  </component>
+</project>

.idea/misc.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptSettings">
+    <option name="languageLevel" value="JSX" />
+  </component>
+</project>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/csx.iml" filepath="$PROJECT_DIR$/.idea/csx.iml" />
+    </modules>
+  </component>
+</project>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

.idea/webResources.xml

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="WebResourcesPaths">
+    <contentEntries>
+      <entry url="file://$PROJECT_DIR$">
+        <entryData>
+          <resourceRoots>
+            <path value="file://$PROJECT_DIR$/packages/csx-custom-elements/src" />
+            <path value="file://$PROJECT_DIR$/packages/babel-plugin-transform-csx-jsx/src" />
+            <path value="file://$PROJECT_DIR$/packages/babel-helpers/src" />
+            <path value="file://$PROJECT_DIR$/test" />
+            <path value="file://$PROJECT_DIR$/packages" />
+            <path value="file://$PROJECT_DIR$/packages/csx-custom-elements" />
+            <path value="file://$PROJECT_DIR$/packages/babel-plugin-transform-csx-jsx" />
+            <path value="file://$PROJECT_DIR$/packages/csx" />
+            <path value="file://$PROJECT_DIR$/packages/babel-plugin-transform-csx" />
+            <path value="file://$PROJECT_DIR$/packages/csx/src" />
+            <path value="file://$PROJECT_DIR$/tests" />
+            <path value="file://$PROJECT_DIR$/jest" />
+            <path value="file://$PROJECT_DIR$/examples" />
+          </resourceRoots>
+        </entryData>
+      </entry>
+    </contentEntries>
+  </component>
+</project>

LICENSE

@@ -0,0 +1,312 @@
+Mozilla Public License Version 2.0
+
+   1. Definitions
+
+1.1. "Contributor" means each individual or legal entity that creates, contributes
+to the creation of, or owns Covered Software.
+
+1.2. "Contributor Version" means the combination of the Contributions of others
+(if any) used by a Contributor and that particular Contributor's Contribution.
+
+      1.3. "Contribution" means Covered Software of a particular Contributor.
+
+1.4. "Covered Software" means Source Code Form to which the initial Contributor
+has attached the notice in Exhibit A, the Executable Form of such Source Code
+Form, and Modifications of such Source Code Form, in each case including portions
+thereof.
+
+      1.5. "Incompatible With Secondary Licenses" means
+
+(a) that the initial Contributor has attached the notice described in Exhibit
+B to the Covered Software; or
+
+(b) that the Covered Software was made available under the terms of version
+1.1 or earlier of the License, but not also under the terms of a Secondary
+License.
+
+1.6. "Executable Form" means any form of the work other than Source Code Form.
+
+1.7. "Larger Work" means a work that combines Covered Software with other
+material, in a separate file or files, that is not Covered Software.
+
+      1.8. "License" means this document.
+
+1.9. "Licensable" means having the right to grant, to the maximum extent possible,
+whether at the time of the initial grant or subsequently, any and all of the
+rights conveyed by this License.
+
+      1.10. "Modifications" means any of the following:
+
+(a) any file in Source Code Form that results from an addition to, deletion
+from, or modification of the contents of Covered Software; or
+
+(b) any new file in Source Code Form that contains any Covered Software.
+
+1.11. "Patent Claims" of a Contributor means any patent claim(s), including
+without limitation, method, process, and apparatus claims, in any patent Licensable
+by such Contributor that would be infringed, but for the grant of the License,
+by the making, using, selling, offering for sale, having made, import, or
+transfer of either its Contributions or its Contributor Version.
+
+1.12. "Secondary License" means either the GNU General Public License, Version
+2.0, the GNU Lesser General Public License, Version 2.1, the GNU Affero General
+Public License, Version 3.0, or any later versions of those licenses.
+
+1.13. "Source Code Form" means the form of the work preferred for making modifications.
+
+1.14. "You" (or "Your") means an individual or a legal entity exercising rights
+under this License. For legal entities, "You" includes any entity that controls,
+is controlled by, or is under common control with You. For purposes of this
+definition, "control" means (a) the power, direct or indirect, to cause the
+direction or management of such entity, whether by contract or otherwise,
+or (b) ownership of more than fifty percent (50%) of the outstanding shares
+or beneficial ownership of such entity.
+
+   2. License Grants and Conditions
+
+      2.1. Grants
+
+Each Contributor hereby grants You a world-wide, royalty-free, non-exclusive
+license:
+
+(a) under intellectual property rights (other than patent or trademark) Licensable
+by such Contributor to use, reproduce, make available, modify, display, perform,
+distribute, and otherwise exploit its Contributions, either on an unmodified
+basis, with Modifications, or as part of a Larger Work; and
+
+(b) under Patent Claims of such Contributor to make, use, sell, offer for
+sale, have made, import, and otherwise transfer either its Contributions or
+its Contributor Version.
+
+      2.2. Effective Date
+
+The licenses granted in Section 2.1 with respect to any Contribution become
+effective for each Contribution on the date the Contributor first distributes
+such Contribution.
+
+      2.3. Limitations on Grant Scope
+
+The licenses granted in this Section 2 are the only rights granted under this
+License. No additional rights or licenses will be implied from the distribution
+or licensing of Covered Software under this License. Notwithstanding Section
+2.1(b) above, no patent license is granted by a Contributor:
+
+(a) for any code that a Contributor has removed from Covered Software; or
+
+(b) for infringements caused by: (i) Your and any other third party's modifications
+of Covered Software, or (ii) the combination of its Contributions with other
+software (except as part of its Contributor Version); or
+
+(c) under Patent Claims infringed by Covered Software in the absence of its
+Contributions.
+
+This License does not grant any rights in the trademarks, service marks, or
+logos of any Contributor (except as may be necessary to comply with the notice
+requirements in Section 3.4).
+
+      2.4. Subsequent Licenses
+
+No Contributor makes additional grants as a result of Your choice to distribute
+the Covered Software under a subsequent version of this License (see Section
+10.2) or under the terms of a Secondary License (if permitted under the terms
+of Section 3.3).
+
+      2.5. Representation
+
+Each Contributor represents that the Contributor believes its Contributions
+are its original creation(s) or it has sufficient rights to grant the rights
+to its Contributions conveyed by this License.
+
+      2.6. Fair Use
+
+This License is not intended to limit any rights You have under applicable
+copyright doctrines of fair use, fair dealing, or other equivalents.
+
+      2.7. Conditions
+
+Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted in
+Section 2.1.
+
+   3. Responsibilities
+
+      3.1. Distribution of Source Form
+
+All distribution of Covered Software in Source Code Form, including any Modifications
+that You create or to which You contribute, must be under the terms of this
+License. You must inform recipients that the Source Code Form of the Covered
+Software is governed by the terms of this License, and how they can obtain
+a copy of this License. You may not attempt to alter or restrict the recipients'
+rights in the Source Code Form.
+
+      3.2. Distribution of Executable Form
+
+      If You distribute Covered Software in Executable Form then:
+
+(a) such Covered Software must also be made available in Source Code Form,
+as described in Section 3.1, and You must inform recipients of the Executable
+Form how they can obtain a copy of such Source Code Form by reasonable means
+in a timely manner, at a charge no more than the cost of distribution to the
+recipient; and
+
+(b) You may distribute such Executable Form under the terms of this License,
+or sublicense it under different terms, provided that the license for the
+Executable Form does not attempt to limit or alter the recipients' rights
+in the Source Code Form under this License.
+
+      3.3. Distribution of a Larger Work
+
+You may create and distribute a Larger Work under terms of Your choice, provided
+that You also comply with the requirements of this License for the Covered
+Software. If the Larger Work is a combination of Covered Software with a work
+governed by one or more Secondary Licenses, and the Covered Software is not
+Incompatible With Secondary Licenses, this License permits You to additionally
+distribute such Covered Software under the terms of such Secondary License(s),
+so that the recipient of the Larger Work may, at their option, further distribute
+the Covered Software under the terms of either this License or such Secondary
+License(s).
+
+      3.4. Notices
+
+You may not remove or alter the substance of any license notices (including
+copyright notices, patent notices, disclaimers of warranty, or limitations
+of liability) contained within the Source Code Form of the Covered Software,
+except that You may alter any license notices to the extent required to remedy
+known factual inaccuracies.
+
+      3.5. Application of Additional Terms
+
+You may choose to offer, and to charge a fee for, warranty, support, indemnity
+or liability obligations to one or more recipients of Covered Software. However,
+You may do so only on Your own behalf, and not on behalf of any Contributor.
+You must make it absolutely clear that any such warranty, support, indemnity,
+or liability obligation is offered by You alone, and You hereby agree to indemnify
+every Contributor for any liability incurred by such Contributor as a result
+of warranty, support, indemnity or liability terms You offer. You may include
+additional disclaimers of warranty and limitations of liability specific to
+any jurisdiction.
+
+   4. Inability to Comply Due to Statute or Regulation
+
+If it is impossible for You to comply with any of the terms of this License
+with respect to some or all of the Covered Software due to statute, judicial
+order, or regulation then You must: (a) comply with the terms of this License
+to the maximum extent possible; and (b) describe the limitations and the code
+they affect. Such description must be placed in a text file included with
+all distributions of the Covered Software under this License. Except to the
+extent prohibited by statute or regulation, such description must be sufficiently
+detailed for a recipient of ordinary skill to be able to understand it.
+
+   5. Termination
+
+5.1. The rights granted under this License will terminate automatically if
+You fail to comply with any of its terms. However, if You become compliant,
+then the rights granted under this License from a particular Contributor are
+reinstated (a) provisionally, unless and until such Contributor explicitly
+and finally terminates Your grants, and (b) on an ongoing basis, if such Contributor
+fails to notify You of the non-compliance by some reasonable means prior to
+60 days after You have come back into compliance. Moreover, Your grants from
+a particular Contributor are reinstated on an ongoing basis if such Contributor
+notifies You of the non-compliance by some reasonable means, this is the first
+time You have received notice of non-compliance with this License from such
+Contributor, and You become compliant prior to 30 days after Your receipt
+of the notice.
+
+5.2. If You initiate litigation against any entity by asserting a patent infringement
+claim (excluding declaratory judgment actions, counter-claims, and cross-claims)
+alleging that a Contributor Version directly or indirectly infringes any patent,
+then the rights granted to You by any and all Contributors for the Covered
+Software under Section 2.1 of this License shall terminate.
+
+5.3. In the event of termination under Sections 5.1 or 5.2 above, all end
+user license agreements (excluding distributors and resellers) which have
+been validly granted by You or Your distributors under this License prior
+to termination shall survive termination.
+
+   6. Disclaimer of Warranty
+
+Covered Software is provided under this License on an "as is" basis, without
+warranty of any kind, either expressed, implied, or statutory, including,
+without limitation, warranties that the Covered Software is free of defects,
+merchantable, fit for a particular purpose or non-infringing. The entire risk
+as to the quality and performance of the Covered Software is with You. Should
+any Covered Software prove defective in any respect, You (not any Contributor)
+assume the cost of any necessary servicing, repair, or correction. This disclaimer
+of warranty constitutes an essential part of this License. No use of any Covered
+Software is authorized under this License except under this disclaimer.
+
+   7. Limitation of Liability
+
+Under no circumstances and under no legal theory, whether tort (including
+negligence), contract, or otherwise, shall any Contributor, or anyone who
+distributes Covered Software as permitted above, be liable to You for any
+direct, indirect, special, incidental, or consequential damages of any character
+including, without limitation, damages for lost profits, loss of goodwill,
+work stoppage, computer failure or malfunction, or any and all other commercial
+damages or losses, even if such party shall have been informed of the possibility
+of such damages. This limitation of liability shall not apply to liability
+for death or personal injury resulting from such party's negligence to the
+extent applicable law prohibits such limitation. Some jurisdictions do not
+allow the exclusion or limitation of incidental or consequential damages,
+so this exclusion and limitation may not apply to You.
+
+   8. Litigation
+
+Any litigation relating to this License may be brought only in the courts
+of a jurisdiction where the defendant maintains its principal place of business
+and such litigation shall be governed by laws of that jurisdiction, without
+reference to its conflict-of-law provisions. Nothing in this Section shall
+prevent a party's ability to bring cross-claims or counter-claims.
+
+   9. Miscellaneous
+
+This License represents the complete agreement concerning the subject matter
+hereof. If any provision of this License is held to be unenforceable, such
+provision shall be reformed only to the extent necessary to make it enforceable.
+Any law or regulation which provides that the language of a contract shall
+be construed against the drafter shall not be used to construe this License
+against a Contributor.
+
+   10. Versions of the License
+
+      10.1. New Versions
+
+Mozilla Foundation is the license steward. Except as provided in Section 10.3,
+no one other than the license steward has the right to modify or publish new
+versions of this License. Each version will be given a distinguishing version
+number.
+
+      10.2. Effect of New Versions
+
+You may distribute the Covered Software under the terms of the version of
+the License under which You originally received the Covered Software, or under
+the terms of any subsequent version published by the license steward.
+
+      10.3. Modified Versions
+
+If you create software not governed by this License, and you want to create
+a new license for such software, you may create and use a modified version
+of this License if you rename the license and remove any references to the
+name of the license steward (except to note that such modified license differs
+from this License).
+
+10.4. Distributing Source Code Form that is Incompatible With Secondary Licenses
+
+If You choose to distribute Source Code Form that is Incompatible With Secondary
+Licenses under the terms of this version of the License, the notice described
+in Exhibit B of this License must be attached. Exhibit A - Source Code Form
+License Notice
+
+This Source Code Form is subject to the terms of the Mozilla Public License,
+v. 2.0. If a copy of the MPL was not distributed with this file, You can obtain
+one at http://mozilla.org/MPL/2.0/.
+
+If it is not possible or desirable to put the notice in a particular file,
+then You may include the notice in a location (such as a LICENSE file in a
+relevant directory) where a recipient would be likely to look for such a notice.
+
+You may add additional accurate notices of copyright ownership.
+
+Exhibit B - "Incompatible With Secondary Licenses" Notice
+
+This Source Code Form is "Incompatible With Secondary Licenses", as defined
+by the Mozilla Public License, v. 2.0.

README.md

@@ -0,0 +1,3 @@
+TODO:
+ - the root build scripts are yet to be updated (building/watching and serving examples...)
+ - Key-property is currently intepreted as per render function, it is preferrably per level in the hierarchy

examples/.babelrc

@@ -14,7 +14,7 @@
     [ "@babel/plugin-proposal-nullish-coalescing-operator" ],
     [ "@babel/plugin-proposal-export-namespace-from" ],
     [ "@babel/plugin-proposal-export-default-from" ],
-    [ "../packages/babel-plugin-transform-csx-jsx/dist", {
+    [ "../packages/babel-plugin-transform-csx/dist", {
         //"pragma": "render",
         //"pragmaFrag": "render",
         "throwIfNamespace": false

examples/basic/index.jsx

@@ -0,0 +1,32 @@
+import {render} from "../../packages/csx";
+import style from "./index.scss";
+import {ExamplePage} from "./page";
+
+document.body.appendChild(render(<style>{style}</style>));
+document.body.appendChild(render(<div class="center-me" iCanDoUpperCaseAttrs={ "yes" }>
+    <h1>I am a title!</h1>
+</div>));
+
+//document.body.appendChild(render(<example-page />));
+document.body.appendChild(render(<ExamplePage pageWidth={200} />));
+
+/**
+ * Continuation suggestionss:
+ *  - style-attribute untested
+ *  - Want a way to toggle classes: <Host class={{'bq-checkbox': true, 'checked': this.isChecked}}> could do
+ *  - Supporting fragments <>...</>?
+ */
+// Private vars are visible, because of loose mode, not desirable...
+class PrivTest{
+    #privatevar = 1;
+    get someVar(){
+        console.log(Object.getOwnPropertyDescriptors(this));
+        return this.#privatevar;
+    }
+}
+let a = new PrivTest();
+console.log(a);
+console.log(a.someVar);
+
+let preRenderedText = render("I can prerender text-nodes");
+document.body.appendChild(render(preRenderedText));

examples/basic/page.jsx

@@ -0,0 +1,32 @@
+import {defineElement, render, CustomElement, prop, state} from "../../packages/csx";
+
+@defineElement('example-page')
+export class ExamplePage extends CustomElement{
+    
+    @prop({reflect: true, attr: 'page-width'})
+    set pageWidth(value){
+        if(value!==this.#pageWidth){
+            this.#pageWidth = value;
+        }
+    }
+    get pageWidth(){
+        return this.#pageWidth;
+    }
+    #pageWidth = undefined;
+    
+    render(){
+        return <div className="page" style={{width: `${this.pageWidth}px`}}>
+            <h1>This page is an example!</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elit enim, lacinia in pellentesque ut, fermentum quis risus. Vivamus condimentum turpis ac mattis blandit. Ut scelerisque nulla suscipit, rhoncus justo eget, pulvinar ligula. Donec vel orci dolor. Etiam non neque non lorem venenatis tincidunt. Cras tristique mauris ut leo imperdiet, in bibendum elit ultricies. Morbi et felis sed arcu efficitur aliquam.<br/>
+                Nam ornare scelerisque vestibulum. In porta non risus a tristique. Donec tincidunt diam sed dictum iaculis. In faucibus placerat justo, ut pulvinar tortor hendrerit viverra. Aliquam erat volutpat. Quisque euismod leo at eros fringilla varius. Nam et vulputate nunc. Nunc mattis purus eu massa lacinia posuere.<br/>
+                In fermentum hendrerit purus non mollis. Duis vel leo nibh. Praesent at odio suscipit, consequat lorem quis, posuere lorem. Donec molestie sodales feugiat. Ut in nisi vel est luctus tristique non eget elit. Donec accumsan quam id scelerisque egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu lacus convallis elit eleifend tristique id et sapien. Mauris cursus a enim ut scelerisque. Morbi auctor nisl sem, id dignissim lectus condimentum non. Ut tellus lacus, volutpat eget porttitor et, vulputate pharetra nunc. Donec nec ligula est. Donec eget odio tincidunt, laoreet mi sit amet, euismod odio. Donec vitae dignissim leo, nec ultricies quam.<br/>
+                Proin efficitur arcu sit amet congue commodo. Suspendisse non tristique libero. Maecenas tempor arcu ac felis posuere, eu gravida metus euismod. Vivamus hendrerit nisl id venenatis sodales. Phasellus pharetra arcu a arcu aliquam faucibus. Etiam sodales ligula nisl, sit amet posuere turpis ultricies id. Donec euismod nunc eros, at euismod neque tempor a. Nullam felis eros, imperdiet ac arcu id, lobortis lobortis tellus. Duis mollis sodales leo, et tincidunt enim pretium luctus.<br/>ulputate lorem.
+            </p>
+        </div>
+    }
+    
+    connectedCallback() {
+        super.connectedCallback();
+    }
+}

examples/cfg/.babelrc

@@ -0,0 +1,19 @@
+{
+  "sourceMaps": "both",
+  "presets": [
+      ["@babel/preset-env", {
+        "targets": {
+          "node": "current"
+        }
+      }]
+  ],
+  "plugins": [
+    [ "@babel/plugin-proposal-decorators", { "legacy": true }],
+    [ "@babel/plugin-proposal-class-properties", { "loose":  true } ],
+    [ "@babel/plugin-proposal-private-methods", {"loose":  true } ],
+    [ "@babel/plugin-proposal-optional-chaining" ],
+    [ "@babel/plugin-proposal-nullish-coalescing-operator" ],
+    [ "@babel/plugin-proposal-export-namespace-from" ],
+    [ "@babel/plugin-proposal-export-default-from" ]
+  ]
+}

examples/cfg/rollup-build.js

@@ -0,0 +1,166 @@
+// @cerxes
+import {host, Host} from "@cerxes/host";
+
+// Observables
+import {Observable} from "zen-observable/lib/Observable";
+import {merge, combineLatest, zip} from "zen-observable/lib/extras";
+
+// Rollup and plugins
+import * as rollup from 'rollup';
+import babel from 'rollup-plugin-babel';
+import resolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+import json from "rollup-plugin-json";
+import postcss from "rollup-plugin-postcss";
+import { terser } from 'rollup-plugin-terser';
+
+/** @type {Host} */
+const srcDir = host.from("examples");
+/** @type {Host} */
+const distDir = host.from("public");
+const assetsGlob = `**/*.@(${[
+    "html",
+    "otf",
+    'svg',
+    'ico',
+    'png',
+    'jpg',
+    'jpeg'
+].join('|')})`;
+const sourcesGlob = `**/index.@(js|jsx)`;
+const args = process.argv.slice(2);
+
+const entryConfig = (entry, output)=>({
+    input: srcDir.resolve(entry),
+    output: {
+        file: distDir.resolve(output),
+        format: 'esm',
+        sourcemap: true
+    },
+    plugins: [
+        // json
+        json(),
+        // PostCSS-style
+        postcss({
+            plugins: [],
+            inject: false,
+            minimize: !!args.includes('build')
+        }),
+        // babel
+        babel(),
+        // node_modules
+        resolve({
+            extensions: ['.mjs', '.js', '.jsx', '.json'],
+        }),
+        // CJS-modules
+        commonjs({
+            namedExports: {
+                // If there were any...
+            }
+        }),
+        // minify, but only in production
+        args.includes('build') && terser(),
+    ]
+});
+
+
+function logBundle(output, duration){
+    let relativeOut = distDir.relative(output);
+    console.log(relativeOut + " built in " + (duration/1000)+"s");
+}
+
+/**
+ * Build the examples
+ * @returns {Promise<void>}
+ */
+async function build(){
+    // Clean host
+    await host.remove(distDir.workingDirectory, {recursive: true});
+    console.log("Dist cleaned!");
+    
+    let assetsJob = srcDir.glob(assetsGlob).then(
+        matched=>Promise.all(
+            matched.map(asset=>host.copy(srcDir.resolve(asset), distDir.resolve(asset)).then(()=>asset))
+        )
+    ).then((assets)=>{
+        console.log("Assets copied");
+        return assets;
+    });
+    
+    let sourceJobs = srcDir.glob(sourcesGlob).then(
+        matched=>Promise.all(
+            matched.map(async (source)=>{
+                let sourceStart = new Date();
+                let entry = source;
+                let output = distDir.resolve(source,'..','index.js');
+                let rollupCfg = entryConfig(entry,output);
+                return await rollup.rollup(rollupCfg).then(async (bundle)=>{
+                    let written = await bundle.write(rollupCfg.output);
+                    logBundle(output, (new Date()).getTime()-sourceStart.getTime());
+                    return {bundle, written};
+                });
+            })
+        )
+    );
+    
+    // Wait for both to be done
+    let [app, assets] = await Promise.all([sourceJobs, assetsJob]);
+}
+
+/**
+ * Watch the app (watch asset files and automatically rebuild, this triggers development mode, as it should never be used on the server!)
+ */
+async function watch(){
+    let lastUpdate = new Date();
+    // Clean host
+    await host.remove(distDir.workingDirectory, { recursive: true });
+    console.log("Dist cleaned!");
+    
+    // Configure a WebPackage (containing build-info)
+    
+    // Watch sources and map them to an observable
+    let sourceJobs = await srcDir.glob(sourcesGlob).then(
+        matched=>matched.map((source)=>{
+            let entry = source;
+            let output = distDir.resolve(source,'..','index.js');
+            let rollupCfg = entryConfig(entry,output);
+            let sourceWatcher = rollup.watch(rollupCfg);
+            return new Observable(observer => {
+                sourceWatcher.on('event', event => {
+                    if(event.code==='BUNDLE_END'){
+                        logBundle(output, event.duration);
+                        observer.next(event);
+                    }else if(event.code==='FATAL'){
+                        observer.complete();
+                    }else if(event.code==='ERROR'){
+                        console.error(event.error.toString());
+                    }
+                });
+    
+                return () =>{
+                    // On unsubscription, do what?
+                };
+            });
+        })
+    );
+    
+    let assetsObservable = srcDir.watch().glob(assetsGlob).sync(distDir.workingDirectory).map(event=>{
+        console.log("Assets synced!");
+        // console.log(event.files.join('\n'));
+        return event.files;
+    });
+    
+    combineLatest(...sourceJobs, assetsObservable).subscribe(async (built)=>{
+        let newUpdate = new Date();
+        console.log(`Updated in ${(newUpdate.getTime()- lastUpdate.getTime())/1000}s`);
+        lastUpdate = newUpdate;
+    });
+}
+
+// Run!
+if(args.includes('watch')){
+    watch();
+}else{
+    build();
+}
+

examples/index.html

@@ -15,9 +15,24 @@
     <li>
         <a href="./basic/">Basic testing</a>
     </li>
+    <li>
+        <a href="./svg/">SVG Rendering</a>
+    </li>
+    <li>
+        <a href="./pdf/">PDF Rendering</a>
+    </li>
     <li>
         <a href="./todos-mvc/">Todos MVC</a>
     </li>
+    <li>
+        <a href="./table/">Tables (arrow functions)</a>
+    </li>
+    <li>
+        <a href="./table-2/">Tables 2 (Key-prop)</a>
+    </li>
+    <li>
+        <a href="./inheritance/">Inheritance</a>
+    </li>
 </ul>
 </body>
 </html>

examples/inheritance/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Cerxes - CustomElements - SVG</title>
+</head>
+    <body>
+        <script type="text/javascript" src="./index.js"></script>
+    </body>
+</html>

examples/inheritance/index.jsx

@@ -0,0 +1,34 @@
+import {render, defineElement, prop, CustomElement} from "../../packages/csx";
+
+@defineElement('base-component-2')
+class BaseComponent extends CustomElement{
+    @prop()
+    name;
+    
+    render(){
+        return (
+            <div>
+                <label>Value is</label>
+                <div>{this.name}</div>
+            </div>
+        )
+    }
+}
+@defineElement('extended-component-2')
+class ExtendedComponent extends BaseComponent{
+    @prop()
+    set name(value){
+        super.name = `Hi my name is ${value??""}`;
+    }
+    get name(){
+        return super.name;
+    }
+}
+
+let test = render(<ExtendedComponent name="John Johnson"/>);
+
+document.body.appendChild(test);
+
+
+
+

examples/pdf/assets/logo.svg

@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   viewBox="0 0 1133.3333 392"
+   height="392"
+   width="1133.3333"
+   xml:space="preserve"
+   id="svg4485"
+   version="1.1"><metadata
+     id="metadata4491"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs4489"><clipPath
+       id="clipPath4501"
+       clipPathUnits="userSpaceOnUse"><path
+         id="path4499"
+         d="M 0.06,293.854 H 849.394 V 0.06 H 0.06 Z" /></clipPath><clipPath
+       id="clipPath4515"
+       clipPathUnits="userSpaceOnUse"><path
+         id="path4513"
+         d="M 0.06,293.854 H 849.394 V 0.06 H 0.06 Z" /></clipPath></defs><g
+     transform="matrix(1.3333333,0,0,-1.3333333,0,392)"
+     id="g4493"><g
+       id="g4495"><g
+         clip-path="url(#clipPath4501)"
+         id="g4497"><path
+           id="path4503"
+           style="fill:#43a998;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="M 849.394,160.098 833.52,42.32 285.572,0 263.592,160.098 h 585.802" /></g></g><g
+       id="text4507"
+       style="font-variant:normal;font-weight:900;font-size:91.8742981px;font-family:Simplo;-inkscape-font-specification:Simplo-Black;writing-mode:lr-tb;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       transform="scale(1,-1)"
+       aria-label="LUMMEN"><path
+         id="path4534"
+         d="M 414.79861,-66.139618 H 366.61843 V -132.9369 h 17.22644 v 53.877459 h 30.95374 z" /><path
+         id="path4536"
+         d="m 483.61461,-90.319426 q 0,12.381497 -7.53656,18.97599 -7.53657,6.594493 -22.20595,6.594493 -14.66938,0 -22.20594,-6.594493 -7.49171,-6.594493 -7.49171,-18.931129 V -132.9369 h 17.31615 v 41.675404 q 0,6.953377 2.91594,10.362775 2.91593,3.409397 9.46556,3.409397 6.45991,0 9.42071,-3.274816 3.00565,-3.274816 3.00565,-10.497356 V -132.9369 h 17.31615 z" /><path
+         id="path4538"
+         d="m 569.79162,-66.139618 h -17.13671 v -44.725912 l -12.3815,29.024738 h -11.88803 l -12.3815,-29.024738 v 44.725912 h -16.2395 V -132.9369 h 20.00779 l 15.02826,33.510793 14.98341,-33.510793 h 20.00778 z" /><path
+         id="path4540"
+         d="m 656.82099,-66.139618 h -17.13671 v -44.725912 l -12.38149,29.024738 h -11.88803 l -12.3815,-29.024738 v 44.725912 h -16.2395 V -132.9369 h 20.00778 l 15.02827,33.510793 14.9834,-33.510793 h 20.00778 z" /><path
+         id="path4542"
+         d="M 722.13787,-66.139618 H 673.82312 V -132.9369 h 48.31475 v 12.91983 h -31.17804 v 11.52914 h 28.93502 v 12.919826 h -28.93502 v 16.508663 h 31.17804 z" /><path
+         id="path4544"
+         d="M 797.36892,-66.139618 H 780.77053 L 752.4187,-111.98705 v 45.847432 H 736.6278 V -132.9369 h 20.59097 l 24.35925,38.266006 V -132.9369 h 15.7909 z" /></g><g
+       id="g4509"><g
+         clip-path="url(#clipPath4515)"
+         id="g4511"><path
+           id="path4517"
+           style="fill:#7b7979;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="M 368.363,140.416 285.572,0 264.044,152.94 368.363,140.416" /><path
+           id="path4519"
+           style="fill:#00897e;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="m 0,293.854 15.874,-111.118 352.489,-42.32 21.98,153.438 H 0" /></g></g><path
+       id="path4521"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       d="M 326.403,265.506 V 241.099 L 292,266.583 v -63.156 h 19.345 v 24.404 l 34.401,-25.482 v 63.157 h -19.343" /><path
+       id="path4523"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       d="m 261.052,227.149 h 25.056 v 15.564 h -25.056 v 5.812 h 25.499 v 16.999 h -44.817 v -62.085 h 44.913 v 17.535 h -25.595 v 6.175" /><path
+       id="path4525"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       d="m 212.916,224.493 c -2.776,-2.685 -5.994,-4.025 -9.846,-4.025 -3.936,0 -7.154,1.34 -9.929,4.025 -2.685,2.772 -4.028,6.086 -4.028,9.932 0,3.846 1.343,7.154 4.028,9.836 2.775,2.778 5.993,4.12 9.929,4.12 3.852,0 7.07,-1.342 9.846,-4.12 2.863,-2.682 4.2,-5.99 4.2,-9.836 0,-3.846 -1.337,-7.16 -4.2,-9.932 z m -9.846,43.302 c -9.211,0 -16.999,-3.313 -23.526,-9.842 -6.442,-6.44 -9.752,-14.317 -9.752,-23.528 0,-9.128 3.31,-17 9.752,-23.531 6.527,-6.443 14.315,-9.751 23.526,-9.751 9.217,0 17.006,3.308 23.537,9.751 6.529,6.531 9.834,14.403 9.834,23.531 0,9.211 -3.305,17.088 -9.834,23.528 -6.531,6.529 -14.32,9.842 -23.537,9.842" /><path
+       id="path4527"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       d="m 126.495,239.23 v 7.243 h 11.361 c 4.07,0 7.255,-3.245 7.321,-7.214 -0.066,-3.965 -3.251,-7.207 -7.321,-7.207 h -11.361 z m 30.322,-18.812 c 5.151,5.153 7.827,11.542 7.866,18.812 h 0.006 c 0,0.009 0,0.018 0,0.029 0,0.013 0,0.025 0,0.033 h -0.006 c -0.039,7.268 -2.715,13.663 -7.866,18.81 -5.186,5.188 -11.629,7.422 -18.961,7.422 h -30.778 v -62.082 h 19.417 v 9.554 h 9.974 l 20.613,-27.512 15.481,11.629 -16.764,22.382 c 0.336,0.303 0.691,0.592 1.018,0.923" /><path
+       id="path4529"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       d="m 101.633,234.478 c 0,0.274 0,0.539 0,0.811 0,0.892 0,3.771 0,3.771 H 69.73 v -12.308 h 10.78 c -0.538,-0.812 -1.164,-1.533 -1.884,-2.25 -2.697,-2.688 -6.023,-4.04 -9.884,-4.04 -3.862,0 -7.187,1.352 -9.968,4.04 -2.697,2.79 -4.046,6.115 -4.046,9.976 0,3.871 1.349,7.191 4.046,9.882 2.781,2.786 6.106,4.138 9.968,4.138 3.861,0 6.561,-0.807 9.256,-3.507 l 14.376,13.12 c -6.555,6.558 -14.376,9.881 -23.632,9.881 -9.164,0 -17.071,-3.323 -23.633,-9.881 -6.552,-6.467 -9.788,-14.38 -9.788,-23.633 0,-9.163 3.236,-17.07 9.788,-23.629 6.562,-6.47 14.469,-9.792 23.633,-9.792 9.256,0 17.077,3.322 23.632,9.792 6.559,6.559 9.259,14.466 9.259,23.629" /></g></svg>

examples/pdf/fonts.pcss

@@ -0,0 +1,106 @@
+/* DINPro */
+@font-face {
+    font-family: 'DINPro';
+    src: url('assets/fonts/DINPro.otf');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'DINPro';
+    src: url('assets/fonts/DINPro-Light.otf');
+    font-weight: 200;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'DINPro';
+    src: url('assets/fonts/DINPro-Italic.otf');
+    font-weight: normal;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'DINPro';
+    src: url('assets/fonts/DINPro-Bold.otf');
+    font-weight: 700;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'DINPro';
+    src: url('assets/fonts/DINPro-BoldItalic.otf');
+    font-weight: 700;
+    font-style: italic;
+}
+@font-face {
+    font-family: 'DINPro';
+    src: url('assets/fonts/DINPro-Black.otf');
+    font-weight: 900;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'DINPro';
+    src: url('assets/fonts/DINPro-BlackItalic.otf');
+    font-weight: 900;
+    font-style: italic;
+}
+
+
+/* DINPro Condensed */
+@font-face {
+    font-family: 'DINPro Condensed';
+    src: url('assets/fonts/DINPro.otf');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'DINPro Condensed';
+    src: url('assets/fonts/DINPro-CondLight.otf');
+    font-weight: 200;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'DINPro Condensed';
+    src: url('assets/fonts/DINPro-CondIta.otf');
+    font-weight: normal;
+    font-style: italic;
+}
+
+
+@font-face {
+    font-family: 'DINPro Condensed';
+    src: url('assets/fonts/DINPro-CondMedium.otf');
+    font-weight: 600;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'DINPro Condensed';
+    src: url('assets/fonts/DINPro-CondMediIta.otf');
+    font-weight: 600;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'DINPro Condensed';
+    src: url('assets/fonts/DINPro-CondBold.otf');
+    font-weight: 700;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'DINPro Condensed';
+    src: url('assets/fonts/DINPro-CondBoldIta.otf');
+    font-weight: 700;
+    font-style: italic;
+}
+@font-face {
+    font-family: 'DINPro Condensed';
+    src: url('assets/fonts/DINPro-CondBlack.otf');
+    font-weight: 900;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'DINPro Condensed';
+    src: url('assets/fonts/DINPro-CondBlackIta.otf');
+    font-weight: 900;
+    font-style: italic;
+}

examples/pdf/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Pastabuffet Groen Lummen</title>
+</head>
+<body>
+    <script type="module" src="./index.js"></script>
+</body>
+</html>

examples/pdf/index.jsx

@@ -0,0 +1,88 @@
+import kaartStyle from "./index.pcss";
+import {render, defineElement, CustomElement, Host, state, prop, ShadowDOM} from "../../packages/csx";
+
+// Style
+document.head.appendChild(render(<style>{kaartStyle}</style>));
+
+// Kaart
+@defineElement("pasta-buffet-kaart")
+class PastaBuffetKaart extends CustomElement{
+    
+    @prop() eigenExemplaar;
+    
+    render(){
+        return <div className="kaart">
+            <div className="header">
+                <img src="assets/logo.svg" alt={"logo"} className="logo"/>
+                <div className="header-info">
+                    <div className="title">Pastabuffet</div>
+                    <div className="sub-title">Zondag 02/02/2020 vanaf 17u</div>
+                    <div className="sub-title">O.C De Link, Linkhoutstraat 194</div>
+                </div>
+            </div>
+            <div className="content">
+                <h3>Bestelling</h3>
+                <table className="order">
+                    <tr>
+                        <td className="product-name">Volwassenen</td>
+                        <td className="product-amount"><input type="text"/></td>
+                        <td className="product-multiplier">x</td>
+                        <td className="product-price">14,00€ =</td>
+                        <td className="product-total"><input type="text"/></td>
+                    </tr>
+                    <tr>
+                        <td className="product-name">Kinderen</td>
+                        <td className="product-amount"><input type="text"/></td>
+                        <td className="product-multiplier">x</td>
+                        <td className="product-price">8,00€ =</td>
+                        <td className="product-total"><input type="text"/></td>
+                    </tr>
+                    <tr>
+                        <td colSpan={3}/>
+                        <td className="total-label">Totaal =</td>
+                        <td className="order-total"><input type="text"/></td>
+                    </tr>
+                </table>
+        
+                <table className="account">
+                    <tr>
+                        <td className="product-name">Naam</td>
+                        <td className="product-input"><input type="text"/></td>
+                    </tr>
+                </table>
+        
+                <div className="payment-options">
+                    <div className="option">
+                        Cash betaald
+                        <input type="checkbox"/>
+                    </div>
+                    <div className="option">
+                        Overschrijving
+                        <input type="checkbox"/>
+                        BE50 9731 5197 8018
+                    </div>
+                </div>
+            </div>
+            <div className="footer">
+                {this.eigenExemplaar ? ([
+                    <div className="form-for">Eigen exemplaar</div>,
+                    <div className="contact">Contactpersoon: Peter Aerts 0499 26 54 99</div>
+                ]) : ([
+                    <div className="form-for">Exemplaar voor Groen Lummen</div>
+                ])}
+            </div>
+        </div>
+    }
+}
+
+// Kaarten
+document.body.appendChild(render(<div className="kaarten-print">
+    <div className="kaarten-pair">
+        <PastaBuffetKaart eigenExemplaar={true}/>
+        <PastaBuffetKaart/>
+    </div>
+    <div className="kaarten-pair">
+        <PastaBuffetKaart eigenExemplaar={true}/>
+        <PastaBuffetKaart/>
+    </div>
+</div>));

examples/pdf/index.pcss

@@ -0,0 +1,158 @@
+@import "./fonts.pcss";
+
+@page {
+    size: A4 landscape;
+    margin: 0;
+}
+
+@media print {
+    html {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        background: none !important;
+    }
+
+    body {
+        width: 297mm;
+        height: 210mm;
+        size: landscape A4;
+        border: none !important;
+        background: none !important;
+        padding: 0 !important;
+    }
+}
+
+html{
+    background: #aeaeae;
+    font-family: 'DINPro';
+    font-size: 10.5pt;
+}
+body{
+    background: white;
+    margin: 0;
+    display: flex;
+    width: 289mm;
+    height: 202mm;
+    border: 1px solid black;
+    padding: 4mm;
+}
+
+.kaarten-print{
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+}
+
+.kaarten-pair{
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    justify-content: space-evenly;
+}
+
+.kaart{
+    display: flex;
+    flex-direction: column;
+    max-width: 148mm;
+    padding: 1em;
+
+    & .header{
+        display: flex;
+        flex-direction: row;
+
+        & .logo{
+            flex: 0 1 35%;
+            max-width: 35%;
+        }
+
+        & .header-info{
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            flex: 1 1 auto;
+
+            & .title{
+                font-size: 200%;
+                font-weight: bold;
+            }
+
+            & .sub-title{
+               font-weight: 700;
+                color: #666;
+            }
+        }
+    }
+
+    & .content{
+        display: flex;
+        flex-direction: column;
+
+        & table{
+            margin-bottom: .75em;
+        }
+
+        & .order >tr >td{
+            padding-bottom: .25em;
+        }
+
+        & .product-name{
+            font-weight: 600;
+            width: 6em;
+        }
+        & .product-multiplier{
+            font-weight: 600;
+            width: 1em;
+        }
+        & .product-price, & .total-label{
+            font-weight: 600;
+            text-align: right;
+            width: 4em;
+        }
+
+        & .payment-options{
+            display: flex;
+            flex-direction: row;
+            justify-content: space-evenly;
+
+            & .option{
+                padding: 0 0 1em;
+            }
+        }
+
+    }
+
+    & .footer{
+        align-self: center;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        & .form-for{
+            font-weight: bold;
+        }
+        & .contact{
+            font-size: 90%;
+        }
+
+    }
+}
+
+input[type=text]{
+    border: none;
+    border-bottom: 1px dashed darkgray;
+
+    width: calc(100% - 1em);
+}
+
+input[type=checkbox]{
+    -webkit-appearance: none;
+    border: 1px solid #999;
+    padding: 9px;
+    display: inline-block;
+    position: relative;
+    top: 6px;
+    margin: 3px 6px;
+}

examples/postcss.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+    plugins: [
+        //require('autoprefixer'),
+        require('postcss-import'),
+        require('postcss-preset-env')({
+            stage: 1,
+        })
+    ]
+};

examples/svg/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Cerxes - CustomElements - SVG</title>
+</head>
+    <body>
+        <script type="text/javascript" src="./index.js"></script>
+    </body>
+</html>

examples/svg/index.jsx

@@ -0,0 +1,47 @@
+import {render} from "../../packages/csx";
+import style from "./index.scss";
+import {SvgLoader} from "./svg-loader";
+import {SvgTester} from "./svg-tester";
+import {SvgTesterTwo} from "./svg-tester-two";
+
+let loader = render(<SvgLoader inverted="yes"/>);
+
+document.body.appendChild(render(<style>{style}</style>));
+document.body.appendChild(render(
+    <div class="center-me">
+        <h3>SVG Loader</h3>
+        {loader}
+        <h3>SVG Tester</h3>
+        <SvgTester/>
+        <h3>SVG Tester Two</h3>
+        <SvgTesterTwo/>
+    </div>
+));
+
+
+setTimeout(()=>{
+    console.log("Uninverting");
+    loader.removeAttribute("inverted");
+    
+    setTimeout(()=>{
+        console.log("Inverting");
+        loader.setAttribute("inverted", "ja");
+    
+        setTimeout(()=>{
+            console.log("Stays inverted");
+            loader.setAttribute("inverted", "");
+    
+            setTimeout(()=>{
+                console.log("Inverted color");
+                loader.setAttribute("inverted-color", "#0F0");
+            }, 1000);
+        }, 1000);
+    }, 1000);
+    
+    
+}, 1000);
+
+
+
+
+

examples/svg/svg-loader.jsx

@@ -0,0 +1,57 @@
+import {CustomElement, defineElement, Host, ShadowDOM, state, prop} from "../../packages/csx";
+import loaderComponentShadowStyle from './svg-loader.shadow.scss';
+
+// TODO configurability, like inverted and not with props...
+
+@defineElement('svg-loader')
+export class SvgLoader extends CustomElement{
+    // Constructor
+    constructor(){
+        super();
+    }
+    
+    // Private properties
+    
+    // Properties
+    @prop({reflect: true}) inverted;
+    @prop({reflect: true, attr: "inverted-color"}) invertedColor = "#000";
+    
+    // Handlers
+    
+    // CustomElement
+    render(){
+        return (
+            <Host>
+                <ShadowDOM>
+                    <style>
+                        { loaderComponentShadowStyle }
+                    </style>
+                    
+                    <div class="loader-content">
+                        <div class="spinner">
+                            <svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke={(this.inverted??false)!==false? this.invertedColor : "#F00"}>
+                                <g fill="none" fill-rule="evenodd">
+                                    <g transform="translate(1 1)" stroke-width="2">
+                                        <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
+                                        <path d="M36 18c0-9.94-8.06-18-18-18">
+                                            <animateTransform
+                                                attributeName="transform"
+                                                type="rotate"
+                                                from="0 18 18"
+                                                to="360 18 18"
+                                                dur="1s"
+                                                repeatCount="indefinite"/>
+                                        </path>
+                                    </g>
+                                </g>
+                            </svg>
+                        </div>
+    
+                        <slot>
+                        </slot>
+                    </div>
+                </ShadowDOM>
+            </Host>
+        )
+    }
+}

examples/svg/svg-loader.shadow.scss

@@ -0,0 +1,10 @@
+:host{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .spinner{
+        padding: .5rem;
+    }
+}

examples/svg/svg-tester-two.jsx

@@ -0,0 +1,43 @@
+import {CustomElement, defineElement, Host, ShadowDOM, state, prop} from "../../packages/csx";
+import {SvgLoader} from "./svg-loader";
+
+@defineElement('svg-tester-two')
+export class SvgTesterTwo extends CustomElement{
+    // Constructor
+    constructor(){
+        super();
+    }
+    
+    // Private properties
+    states = [
+        { inverted: true, invertedColor: "#F00"},
+        { inverted: true, invertedColor: "#FF0"},
+        { inverted: true, invertedColor: "#0FF"},
+        { inverted: false},
+        { inverted: true, invertedColor: "#0F0"},
+    ];
+    
+    // Properties
+    @state() state = this.states[0];
+    
+    // Handlers
+    
+    // CustomElement
+    connectedCallback() {
+        setInterval(()=>{
+            // Moving state
+            let curIndex = this.states.indexOf(this.state);
+            this.state = this.states[(curIndex+1)>=this.states.length?0:curIndex+1];
+        }, 1000);
+        super.connectedCallback();
+    }
+    
+    render(){
+        // invertedColor instead of inverted-color is the only difference!
+        return (
+            <Host>
+                <SvgLoader inverted={this.state.inverted} invertedColor={this.state.invertedColor} />
+            </Host>
+        );
+    }
+}

examples/svg/svg-tester.jsx

@@ -0,0 +1,42 @@
+import {CustomElement, defineElement, Host, ShadowDOM, state, prop} from "../../packages/csx";
+import {SvgLoader} from "./svg-loader";
+
+@defineElement('svg-tester')
+export class SvgTester extends CustomElement{
+    // Constructor
+    constructor(){
+        super();
+    }
+    
+    // Private properties
+    states = [
+        { inverted: true, invertedColor: "#F00"},
+        { inverted: true, invertedColor: "#FF0"},
+        { inverted: true, invertedColor: "#0FF"},
+        { inverted: false},
+        { inverted: true, invertedColor: "#0F0"},
+    ];
+    
+    // Properties
+    @state() state = this.states[0];
+    
+    // Handlers
+    
+    // CustomElement
+    connectedCallback() {
+        setInterval(()=>{
+            // Moving state
+            let curIndex = this.states.indexOf(this.state);
+            this.state = this.states[(curIndex+1)>=this.states.length?0:curIndex+1];
+        }, 1000);
+        super.connectedCallback();
+    }
+    
+    render(){
+        return (
+            <Host>
+                <SvgLoader inverted={this.state.inverted} inverted-color={this.state.invertedColor} />
+            </Host>
+        );
+    }
+}

examples/table-2/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Cerxes - CustomElements - SVG</title>
+</head>
+    <body>
+        <script type="text/javascript" src="./index.js"></script>
+    </body>
+</html>

examples/table-2/index.jsx

@@ -0,0 +1,132 @@
+import {render, CustomElement, defineElement, Host, prop, state} from "../../packages/csx";
+import style from "./index.scss";
+import {TableComponent} from "./table-component";
+
+@defineElement("table-tester")
+class TableTester extends CustomElement{
+    /**
+     *
+     * @type {({[headerRender]: (function(): string), render: (function(User): *), [size]: number})[]}
+     */
+    #columnDefinitions = [
+        {
+            headerRender: () => "Id",
+            render: (u) => u.userId,
+            size: 110
+        },
+        {
+            headerRender: () => "Email",
+            render: (u) => u.identity?.email,
+        },
+        {
+            headerRender: () => "FirstName",
+            render: (u) => u.identity?.firstName,
+            size: 160
+        },
+        {
+            headerRender: () => "LastName",
+            render: (u) => u.identity?.lastName,
+            size: 160
+        },
+        {
+            headerRender: () => "Up",
+            render: (u) => {
+                let d = new Date();
+                return (<button onClick={(ev) => this.moveUp(ev, u, d)}>Up</button>)
+            },
+            size: 110
+        },
+        {
+            headerRender: () => "Down",
+            render: (u) => {
+                let d = new Date();
+                return (<button onClick={(ev) => this.moveDown(ev, u, d)}>Down</button>)
+            },
+            size: 110
+        },
+    ];
+    
+    @state()
+    users = [];
+    
+    rowKey = (user)=>user.userId;
+    cellRef = (user, colIdx, el)=>user.cells[colIdx]=el;
+    
+    render(){
+        
+        return <TableComponent
+                columns={this.#columnDefinitions}
+                data={this.users}
+                rowKey={this.rowKey}
+                cellRef={this.cellRef}
+        />
+    }
+    
+    connectedCallback() {
+        super.connectedCallback();
+        
+        setTimeout(()=>this.load(), 0);
+    }
+    
+    interval;
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if(this.interval) {
+            clearInterval(this.interval);
+        }
+    }
+    
+    load(){
+        let users = [];
+        
+        let rndFirstNames = ['Loes', 'Johnny', 'Maria', 'Jezus', 'Philippe', 'Filip', 'Annie'];
+        let rndLastNames = ['Peeters', 'Wachters', 'Jannsens', 'De Schaetzen', 'Becks', 'Konings', 'De Clerk'];
+        
+        for(let i = 0; i < 10; ++i){
+            let first = rndFirstNames[Math.floor(rndFirstNames.length*Math.random())];
+            let last = rndLastNames[Math.floor(rndLastNames.length*Math.random())];
+            users.push({
+                userId: (Math.random()*99999).toString(36).slice(-6).toUpperCase(),
+                identity: {
+                    firstName: first,
+                    lastName: last,
+                    email: `${first}.${last}@example.com`.toLocaleLowerCase()
+                },
+                cells: []
+            })
+        }
+        
+        this.users = users;
+    }
+    
+    lastClear = new Date();
+    
+    moveUp = (ev, u, d)=>{
+        let data = this.users.slice();
+        let indexOf = this.users.indexOf(u);
+    
+        if(indexOf>0) {
+            let [before, after] = data.splice(indexOf - 1, 2);
+            data.splice(indexOf - 1, 0, after, before);
+            console.log(data.map((u,index)=>this.rowKey(u,index)))
+            this.users = data;
+        }
+        console.log(this.users);
+    }
+    
+    moveDown = (ev, u, d)=>{
+        let data = this.users.slice();
+        let indexOf = this.users.indexOf(u);
+        
+        if(indexOf<(this.users.length-1)) {
+            let [before, after] = data.splice(indexOf, 2);
+            data.splice(indexOf, 0, after, before);
+            console.log(data.map((u,index)=>this.rowKey(u,index)));
+            this.users = data;
+        }
+        console.log(this.users);
+    }
+}
+
+document.body.appendChild(render(<style>{style}</style>));
+document.body.appendChild(render(<TableTester/>));

examples/table-2/index.scss

@@ -0,0 +1,19 @@
+html{
+  width: 100%;
+  height: 100%;
+}
+
+body{
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+.center-me{
+  align-self: center;
+}

examples/table-2/table-component.jsx

@@ -0,0 +1,72 @@
+import {CustomElement, defineElement, Host, prop, state} from "../../packages/csx";
+import TableComponentStyle from "./table-component.scss";
+
+let tableId = 0;
+
+@defineElement("tripto-table")
+export class TableComponent extends CustomElement {
+
+    #columnDefinitions;
+
+    @prop()
+    set columns(value) {
+        this.#columnDefinitions = value;
+    }
+
+    @state() data;
+
+    @prop()
+    set data(value) {
+        this.data = value;
+        this.rows = new Map();
+    }
+    
+    @prop()
+    rowKey = (value,index)=>index;
+    
+    @prop()
+    cellRef = ()=>null;
+    
+    rows = new Map();
+
+    #tableId = tableId++;
+    render() {
+        console.log(`Table render at for ${this.data?.length??0} rows: ${Date.now()}`);
+        return (
+            <Host>
+                <style>{TableComponentStyle}</style>
+                <style>
+                    {this.#columnDefinitions?.map((col, idx) => (
+                        `#table_${this.#tableId} .cell.cell_${idx} {` +
+                        `   flex: ${(col.size ? (`0 0 ${col.size}px`) : `1`)};` +
+                        `}`
+                    ))}
+                </style>
+                <section className="table" id={`table_${this.#tableId}`}>
+                    <header>
+                        <div className="row">
+                            {this.#columnDefinitions.map((col, idx) => (
+                                <div className={`cell cell_${idx}`}>
+                                    {col.headerRender()}
+                                </div>
+                            ))}
+                        </div>
+                    </header>
+                    <main>
+                        {this.data?.map((dataRow,index) => (
+                            <div className="row"
+                                 key={this.rowKey(dataRow, index)}
+                                 ref={(el)=>this.rows.set(this.rowKey(dataRow,index), el)}>
+                                {this.#columnDefinitions.map((col, idx) => (
+                                    <div className={`cell cell_${idx}`} key={idx} ref={(el)=>this.cellRef(dataRow,idx,el)}>
+                                        {col.render(dataRow)}
+                                    </div>
+                                ))}
+                            </div>
+                        ))}
+                    </main>
+                </section>
+            </Host>
+        );
+    }
+}

examples/table-2/table-component.scss

@@ -0,0 +1,32 @@
+
+.table {
+    --box-color: #a0a0a0;
+    --primary-color: #5f74ff;
+    --table-background: #e4e4f0;
+    --box-border: 1px solid #7d7d7d;
+
+    border: var(--box-border);
+    display: block;
+
+    header {
+        color: var(--primary-color);
+    }
+
+    header > .row,
+    main > .row {
+        background: var(--table-background);
+        display: flex;
+        width: 100%;
+        line-height: 3em;
+        border-bottom: var(--box-border);
+
+         .cell {
+            padding: 0 15px;
+        }
+    }
+    main > .row {
+        &:last-child {
+            border-bottom: 0;
+        }
+    }
+}

examples/table/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Cerxes - CustomElements - SVG</title>
+</head>
+    <body>
+        <script type="text/javascript" src="./index.js"></script>
+    </body>
+</html>

examples/table/index.jsx

@@ -0,0 +1,108 @@
+import {render, CustomElement, defineElement, Host, prop, state} from "../../packages/csx";
+import style from "./index.scss";
+import {TableComponent} from "./table-component";
+
+@defineElement("table-tester")
+class TableTester extends CustomElement{
+    
+    
+    /**
+     *
+     * @type {({[headerRender]: (function(): string), render: (function(User): *), [size]: number})[]}
+     */
+    #columnDefinitions = [
+        {
+            headerRender: () => "Id",
+            render: (u) => u.userId,
+            size: 110
+        },
+        {
+            headerRender: () => "Email",
+            render: (u) => u.identity?.email,
+        },
+        {
+            headerRender: () => "FirstName",
+            render: (u) => u.identity?.firstName,
+            size: 160
+        },
+        {
+            headerRender: () => "LastName",
+            render: (u) => u.identity?.lastName,
+            size: 160
+        },
+        {
+            headerRender: () => "...",
+            render: (u) => {
+                let d = new Date();
+                return (<button onClick={(ev) => this.testMe(ev, u, d)}>test me</button>)
+            },
+            size: 110
+        },
+    ];
+    
+    @state()
+    users = [];
+    
+    render(){
+        
+        return <TableComponent
+                columns={this.#columnDefinitions}
+                data={this.users}
+        />
+    }
+    
+    connectedCallback() {
+        super.connectedCallback();
+        
+        setTimeout(()=>this.load(), 0);
+        setTimeout(()=>this.load(), 50);
+        setTimeout(()=>this.load(), 100);
+        setTimeout(()=>this.load(), 150);
+        setTimeout(()=>this.load(), 200);
+        setTimeout(()=>this.load(), 250);
+        
+        this.interval = setInterval(()=>this.load(), 3000);
+    }
+    
+    interval;
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if(this.interval) {
+            clearInterval(this.interval);
+        }
+    }
+    
+    load(){
+        let users = [];
+        
+        let rndFirstNames = ['Loes', 'Johnny', 'Maria', 'Jezus', 'Philippe', 'Filip', 'Annie'];
+        let rndLastNames = ['Peeters', 'Wachters', 'Jannsens', 'De Schaetzen', 'Becks', 'Konings', 'De Clerk'];
+        
+        for(let i = 0; i < 5; ++i){
+            let first = rndFirstNames[Math.floor(rndFirstNames.length*Math.random())];
+            let last = rndLastNames[Math.floor(rndLastNames.length*Math.random())];
+            users.push({
+                userId: (Math.random()*99999).toString(36).slice(-6).toUpperCase(),
+                identity: {
+                    firstName: first,
+                    lastName: last,
+                    email: `${first}.${last}@example.com`.toLocaleLowerCase()
+                }
+            })
+        }
+        
+        this.users = users;
+    }
+    
+    lastClear = new Date();
+    testMe = (ev, u, d)=>{
+        if((new Date()).getTime() - this.lastClear.getTime() > 20){
+            console.log("\n\n");
+            this.lastClear = new Date();
+        }
+        console.log("I should only show up once per click:", d.getTime());
+    }
+}
+
+document.body.appendChild(render(<style>{style}</style>));
+document.body.appendChild(render(<TableTester/>));

examples/table/index.scss

@@ -0,0 +1,19 @@
+html{
+  width: 100%;
+  height: 100%;
+}
+
+body{
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+.center-me{
+  align-self: center;
+}

examples/table/table-component.jsx

@@ -0,0 +1,61 @@
+import {CustomElement, defineElement, Host, prop, state} from "../../packages/csx";
+import TableComponentStyle from "./table-component.scss";
+
+let tableId = 0;
+
+@defineElement("tripto-table")
+export class TableComponent extends CustomElement {
+
+    #columnDefinitions;
+
+    @prop()
+    set columns(value) {
+        this.#columnDefinitions = value;
+    }
+
+    @state() data;
+
+    @prop()
+    set data(value) {
+        this.data = value;
+    }
+
+    #tableId = tableId++;
+    render() {
+        console.log(`Table render at for ${this.data?.length??0} rows: ${Date.now()}`);
+        return (
+            <Host>
+                <style>{TableComponentStyle}</style>
+                <style>
+                    {this.#columnDefinitions?.map((col, idx) => (
+                        `#table_${this.#tableId} .cell.cell_${idx} {` +
+                        `   flex: ${(col.size ? (`0 0 ${col.size}px`) : `1`)};` +
+                        `}`
+                    ))}
+                </style>
+                <section className="table" id={`table_${this.#tableId}`}>
+                    <header>
+                        <div className="row">
+                            {this.#columnDefinitions.map((col, idx) => (
+                                <div className={`cell cell_${idx}`}>
+                                    {col.headerRender()}
+                                </div>
+                            ))}
+                        </div>
+                    </header>
+                    <main>
+                        {this.data?.map(dataRow => (
+                            <div className="row">
+                                {this.#columnDefinitions.map((col, idx) => (
+                                    <div className={`cell cell_${idx}`}>
+                                        {col.render(dataRow)}
+                                    </div>
+                                ))}
+                            </div>
+                        ))}
+                    </main>
+                </section>
+            </Host>
+        );
+    }
+}

examples/table/table-component.scss

@@ -0,0 +1,32 @@
+
+.table {
+    --box-color: #a0a0a0;
+    --primary-color: #5f74ff;
+    --table-background: #e4e4f0;
+    --box-border: 1px solid #7d7d7d;
+
+    border: var(--box-border);
+    display: block;
+
+    header {
+        color: var(--primary-color);
+    }
+
+    header > .row,
+    main > .row {
+        background: var(--table-background);
+        display: flex;
+        width: 100%;
+        line-height: 3em;
+        border-bottom: var(--box-border);
+
+         .cell {
+            padding: 0 15px;
+        }
+    }
+    main > .row {
+        &:last-child {
+            border-bottom: 0;
+        }
+    }
+}

examples/todos-mvc/components/my-todo.jsx

@@ -1,4 +1,4 @@
-import {defineElement, render, CustomElement, Host, State} from "../../../packages/csx-custom-elements";
+import {defineElement, render, CustomElement, Host, state} from "../../../packages/csx";
 
 import style from './my-todo.scss';
 import {TodoInput} from './todo-input';
@@ -7,7 +7,7 @@ import {TodoItem} from './todo-item';
 @defineElement('my-todo')
 export class MyTodo extends CustomElement{
     uid = 1;
-    @State() todos = [
+    @state() todos = [
         {id: this.uid++, text: "my initial todo", checked: false },
         {id: this.uid++, text: "Learn about Web Components", checked: false },
     ];
@@ -18,18 +18,19 @@ export class MyTodo extends CustomElement{
                 <style>{ style }</style>
                 <h1>CSX Todo</h1>
                 <section>
-                    <todo-input onSubmit={this.handleSubmit}/>
+                    <TodoInput onSubmit={this.handleSubmit}/>
                     <ul id="list-container"
                         onCheck={this.handleCheck}
                         onRemove={this.handleRemove}
                     >
                         {this.todos.map(item =>
-                            <todo-item
+                            <TodoItem
+                                key={item.id}
                                 model={ item.id }
                                 checked={ item.checked }
                             >
                                 { item.text }
-                            </todo-item>
+                            </TodoItem>
                         )}
                     </ul>
                 </section>

examples/todos-mvc/components/todo-input.jsx

@@ -1,9 +1,9 @@
-import {defineElement, render, CustomElement, Host, State} from "../../../packages/csx-custom-elements";
+import {defineElement, render, CustomElement, Host, state} from "../../../packages/csx";
 import style from './todo-input.scss';
 
 @defineElement('todo-input')
 export class TodoInput extends CustomElement{
-    @State() value = "";
+    @state() value = "";
     
     render(){
         return (

examples/todos-mvc/components/todo-item.jsx

@@ -1,10 +1,10 @@
-import {defineElement, render, CustomElement, Host, ShadowDOM, State, Prop} from "../../../packages/csx-custom-elements";
+import {defineElement, render, CustomElement, Host, ShadowDOM, state, prop} from "../../../packages/csx";
 import style from './todo-item.scss';
 
 @defineElement('todo-item')
 export class TodoItem extends CustomElement{
-    @Prop() checked = false;
+    @prop({reflect: true}) checked = false;
-    @Prop() model;
+    @prop() model;
     
     render(){
         return (

examples/todos-mvc/index.jsx

@@ -1,4 +1,4 @@
-import {render} from "../../packages/csx-custom-elements";
+import {render} from "../../packages/csx";
 import style from "./index.scss";
 import {MyTodo} from "./components/my-todo";
 

examples/todos-mvc/index.scss

@@ -0,0 +1,19 @@
+html{
+  width: 100%;
+  height: 100%;
+}
+
+body{
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+.center-me{
+  align-self: center;
+}

jest.config.js

@@ -0,0 +1,13 @@
+let path = require("path");
+
+module.exports = {
+    moduleNameMapper: {
+        "@cerxes/csx": path.resolve(__dirname, 'packages/csx/dist/index.cjs.js'),
+    },
+    testEnvironment: "jest-environment-jsdom-sixteen",
+    setupFiles: [
+    ],
+    setupFilesAfterEnv: [
+    ],
+    /*maxConcurrency: 1*/
+};

jest/.babelrc

@@ -0,0 +1,23 @@
+{
+  "presets": [
+    ["@babel/preset-env", {
+      "targets": {
+        "node": "current"
+      }
+    }]
+  ],
+  "plugins": [
+    [ "@babel/plugin-proposal-decorators", { "legacy": true }],
+    [ "@babel/plugin-proposal-class-properties", { "loose":  true } ],
+    [ "@babel/plugin-proposal-private-methods", {"loose":  true } ],
+    [ "@babel/plugin-proposal-optional-chaining" ],
+    [ "@babel/plugin-proposal-nullish-coalescing-operator" ],
+    [ "@babel/plugin-proposal-export-namespace-from" ],
+    [ "@babel/plugin-proposal-export-default-from" ],
+    [ "../packages/babel-plugin-transform-csx/dist", {
+        //"pragma": "render",
+        //"pragmaFrag": "render",
+        "throwIfNamespace": false
+    }]
+  ]
+}

jest/README.md

@@ -0,0 +1,4 @@
+TODO:
+    - Test key-properties behaving as it should (This is a known bug)
+    - Test ref-properties
+    - Test overriden prop/state (this is a suspected  bug)

jest/components/basic.test.js

@@ -0,0 +1,111 @@
+import { render, CustomElement, Host, defineElement, state, prop } from "@cerxes/csx";
+import { testContainer } from "../utils/test-container";
+import { nextAnimationFrame } from "../utils/next-animation-frame";
+
+describe("Basic tests", () => {
+    /**
+     * Assert that a basic component renders as expected
+     */
+    test("Simple example-component", async () => {
+        @defineElement('basic-component')
+        class BasicComponent extends CustomElement{
+            render(){
+                return (
+                    <div className="page" style={{width: `20em`}}>
+                        <h1>This page is an example!</h1>
+                        <p>
+                            These are the contents.<br/>
+                        </p>
+                    </div>
+                )
+            }
+        }
+        
+        let container = testContainer(
+            render(<BasicComponent/>)
+        );
+        document.body.appendChild(container);// Components need to be added to the DOM or their connectecCallback will not be called
+        
+        expect(
+            container.innerHTML
+        ).toBe([
+            `<basic-component>`,
+            `<div class="page" style="width: 20em;"><h1>This page is an example!</h1><p>These are the contents.<br></p></div>`,
+            `</basic-component>`,
+        ].join(''));
+        
+        document.body.removeChild(container);
+    });
+    
+    /**
+     * Assert that a component rerenders when one of it's state variables changes
+     */
+    test("Component state", async () => {
+        @defineElement('state-test')
+        class StateComponent extends CustomElement{
+            @state()
+            loading = false;
+            
+            render(){
+                return (<Host>
+                    {this.loading? "loading" : "not-loading"}
+                </Host>)
+            }
+        }
+        
+        let component = render(<StateComponent/>);
+        let container = testContainer(component);
+        document.body.appendChild(container);// Components need to be added to the DOM or their connectecCallback will not be called
+        
+        // Initial
+        expect(container.innerHTML).toBe(`<state-test>not-loading</state-test>`);
+        
+        // Change state and wait for the next animation frame to passs
+        component.loading = true;
+        await nextAnimationFrame();
+    
+        // Updated by state
+        expect(container.innerHTML).toBe(`<state-test>loading</state-test>`);
+        
+        document.body.removeChild(container);
+    });
+    
+    /**
+     * Assert that a component rerenders when one of it's properties changes, and in doing so, that it's properties can be set
+     * through the CSX render function
+     */
+    test("Component properties", async () => {
+        @defineElement('prop-test')
+        class PropComponent extends CustomElement{
+            @prop()
+            title = "Default title";
+            
+            render(){
+                return (<Host>
+                    <h1>{this.title}</h1>
+                </Host>)
+            }
+        }
+        
+        let initialVSpec = <PropComponent />;
+        let component = render(initialVSpec);
+        let container = testContainer(component);
+        document.body.appendChild(container);// Components need to be added to the DOM or their connectecCallback will not be called
+        
+        // Initial
+        expect(container.innerHTML).toBe(`<prop-test><h1>Default title</h1></prop-test>`);
+        
+        // Change the prop through CSX and verify that it has been set
+        let updatedVSpec = <PropComponent title={"Updated title"} />;
+        render(updatedVSpec, {host: component, old: initialVSpec});
+        expect(component.title).toBe(`Updated title`);
+        
+        // Wait for the next animation frame for the changes to be rendered
+        await nextAnimationFrame();
+        
+        // Updated by state
+        expect(container.innerHTML).toBe(`<prop-test><h1>Updated title</h1></prop-test>`);
+        
+        document.body.removeChild(container);
+    });
+});

jest/components/function-component.test.js

@@ -0,0 +1,57 @@
+import { render, CustomElement, Host, defineElement, state, prop } from "@cerxes/csx";
+import { testContainer } from "../utils/test-container";
+import { nextAnimationFrame } from "../utils/next-animation-frame";
+
+describe("Function components", () => {
+    /**
+     * Assert that a basic component renders as expected
+     */
+    test("Simple example-component", async () => {
+        
+        function FuncComponent(props, children){
+            return (
+                <div {...props}>
+                    <div className={"header"}>
+                        Header
+                    </div>
+                    <div className={"content"}>
+                        {children}
+                    </div>
+                </div>
+            )
+        }
+        
+        @defineElement('test-component')
+        class TestComponent extends CustomElement{
+            render(){
+                return (
+                    <FuncComponent className={"page"}>
+                        I am example content
+                    </FuncComponent>
+                )
+            }
+        }
+        
+        let container = testContainer(
+            render(<TestComponent/>)
+        );
+        document.body.appendChild(container);// Components need to be added to the DOM or their connectecCallback will not be called
+        
+        expect(
+            container.innerHTML
+        ).toBe([
+            `<test-component>`,
+            `<div class="page">`,
+            `<div class="header">`,
+            `Header`,
+            `</div>`,
+            `<div class="content">`,
+            `I am example content`,
+            `</div>`,
+            `</div>`,
+            `</test-component>`,
+        ].join(''));
+        
+        document.body.removeChild(container);
+    });
+});

jest/components/inheritance.test.js

@@ -0,0 +1,113 @@
+import { render, CustomElement, Host, defineElement, state, prop } from "@cerxes/csx";
+import { testContainer } from "../utils/test-container";
+import { nextAnimationFrame } from "../utils/next-animation-frame";
+
+describe("Inheritance tests", () => {
+    /**
+     * Assert that a we can extend a getter/setter prop
+     */
+    test("Single inherited getter/setter-property", async () => {
+        @defineElement('base-component')
+        class BaseComponent extends CustomElement{
+            @prop()
+            set name(value){
+                if(this.#name!==value){
+                    this.#name = value;
+                }
+            }
+            get name(){
+                return this.#name;
+            }
+            #name;
+            
+            render(){
+                return (
+                    <div>
+                        <label>Value is</label>
+                        <div>{this.name}</div>
+                    </div>
+                )
+            }
+        }
+        @defineElement('extended-component')
+        class ExtendedComponent extends BaseComponent{
+            @prop()
+            set name(value){
+                super.name = `Hi my name is ${value??""}`;
+            }
+            get name(){
+                return super.name;
+            }
+        }
+        
+        let container = testContainer(
+            render(<ExtendedComponent name={"Slim Shady"}/>)
+        );
+        document.body.appendChild(container);// Components need to be added to the DOM or their connectecCallback will not be called
+        
+        expect(
+            container.innerHTML
+        ).toBe([
+            `<extended-component>`,
+            `<div>`,
+            `<label>Value is</label>`,
+            `<div>Hi my name is Slim Shady</div>`,
+            `</div>`,
+            `</extended-component>`,
+        ].join(''));
+        
+        document.body.removeChild(container);
+    });
+    
+    
+    /**
+     * Assert that a we can extend a basic prop with a get/set
+     * This test is expected to fail as long as decorators don't fully work as expected in babel
+     * The problem showing up here is an initalizerDefineProperty being called in the base class, that replaces
+     * the end descriptor of the function in the extended version
+     */
+    test("Single inherited basic-property component", async () => {
+        @defineElement('base-component-2')
+        class BaseComponent extends CustomElement{
+            @prop()
+            name;
+            
+            render(){
+                return (
+                    <div>
+                        <label>Value is</label>
+                        <div>{this.name}</div>
+                    </div>
+                )
+            }
+        }
+        @defineElement('extended-component-2')
+        class ExtendedComponent extends BaseComponent{
+            @prop()
+            set name(value){
+                super.name = `Hi my name is ${value??""}`;
+            }
+            get name(){
+                return super.name;
+            }
+        }
+        
+        let container = testContainer(
+            render(<ExtendedComponent name={"John Johnson"}/>)
+        );
+        document.body.appendChild(container);// Components need to be added to the DOM or their connectecCallback will not be called
+        
+        expect(
+            container.innerHTML
+        ).toBe([
+            `<extended-component-2>`,
+            `<div>`,
+            `<label>Value is</label>`,
+            `<div>Hi my name is John Johnson</div>`,
+            `</div>`,
+            `</extended-component-2>`,
+        ].join(''));
+        
+        document.body.removeChild(container);
+    });
+});

jest/components/shadow-dom.test.js

@@ -0,0 +1,169 @@
+import { render, CustomElement, Host, ShadowDOM, defineElement, state, prop } from "@cerxes/csx";
+import { testContainer } from "../utils/test-container";
+import { nextAnimationFrame } from "../utils/next-animation-frame";
+
+describe("Shadow-DOM tests", () => {
+    /**
+     * Assert that shadow dom behaves as expected
+     */
+    test("Simple shadow-component", async () => {
+        @defineElement('shadow-component')
+        class ShadowComponent extends CustomElement{
+            @prop()
+            title = 'Content here';
+            
+            render(){
+                return (
+                    <Host>
+                        <ShadowDOM>
+                            <div>
+                                <h1>{this.title}</h1>
+                                <slot />
+                            </div>
+                        </ShadowDOM>
+                    </Host>
+                )
+            }
+        }
+        
+        let initialVSpec = <ShadowComponent />;
+        let rendered = render(initialVSpec);
+        let container = testContainer(rendered);
+        document.body.appendChild(container);// Components need to be added to the DOM or their connectecCallback will not be called
+        
+        // Initial render
+        expect(
+            container.innerHTML
+        ).toBe([
+            `<shadow-component>`,
+            `</shadow-component>`,
+        ].join(''));
+    
+        expect(
+            rendered.shadowRoot.innerHTML
+        ).toBe([
+            `<div>`,
+            `<h1>Content here</h1>`,
+            `<slot></slot>`,
+            `</div>`,
+        ].join(''));
+    
+        // Update behaves as it should
+        let updatedVSpec = (
+            <ShadowComponent title={"New content here"}>
+                <li><ul>contents</ul></li>
+            </ShadowComponent>
+        );
+        render(updatedVSpec, {host: rendered, old: initialVSpec});
+        
+        // Wait for it to update
+        await nextAnimationFrame();
+    
+        expect(
+            container.innerHTML
+        ).toBe([
+            `<shadow-component>`,
+            `<li><ul>contents</ul></li>`,
+            `</shadow-component>`,
+        ].join(''));
+    
+        expect(
+            rendered.shadowRoot.innerHTML
+        ).toBe([
+            `<div>`,
+            `<h1>New content here</h1>`,
+            `<slot></slot>`,
+            `</div>`,
+        ].join(''));
+    
+        document.body.removeChild(container);
+    });
+    
+    test("Nested shadow-component", async () => {
+        @defineElement('todo-item')
+        class TodoItem extends CustomElement {
+            @prop()
+            get model(){ return this.#model; }
+            set model(value){ this.#model = value; }
+            
+            #model;
+        
+            render(){
+                return (
+                    <Host>
+                        <ShadowDOM>
+                            <input type="checkbox" checked={ this.model.checked }/>
+                            <label>
+                                <slot />
+                            </label>
+                        </ShadowDOM>
+                    </Host>
+                )
+            }
+        }
+        
+        @defineElement('my-todo')
+        class MyTodo extends CustomElement {
+            @state()
+            todos = [
+                { text: "todo 1", checked: true },
+                { text: "todo 2", checked: false },
+            ];
+            
+            rendered = [];
+            
+            render(){
+                return (
+                    <Host>
+                        <h1>Todos</h1>
+                        <ul>
+                            {this.todos.map((todo,index)=>(
+                                <TodoItem model={todo}
+                                          ref={(el)=>this.rendered[index]=el}
+                                >
+                                    {todo.text}
+                                </TodoItem>
+                            ))}
+                        </ul>
+                    </Host>
+                )
+            }
+        }
+    
+        let initialVSpec = <MyTodo />;
+        let rendered = render(initialVSpec);
+        let container = testContainer(rendered);
+        document.body.appendChild(container);// Components need to be added to the DOM or their connectecCallback will not be called
+        
+        // Initial render
+        expect(
+            container.innerHTML
+        ).toBe([
+            `<my-todo>`,
+            `<h1>Todos</h1>`,
+            `<ul>`,
+            ...rendered.todos.map(todo=>(
+                `<todo-item>${todo.text}</todo-item>`
+            )),
+            `</ul>`,
+            `</my-todo>`,
+        ].join(''));
+    
+        for(let i = 0; i < rendered.todos.length; ++i){
+            let todo = rendered.todos[i];
+            let el = rendered.rendered[i];
+            expect(el).not.toBeUndefined();
+            expect(
+                el.shadowRoot.innerHTML
+            ).toBe([
+                `<input type="checkbox"${todo.checked? ' checked=""': ''}>`,
+                `<label>`,
+                `<slot></slot>`,
+                `</label>`
+            ].join(''));
+        }
+    
+        document.body.removeChild(container);
+    });
+    
+});

jest/components/svg.test.js

@@ -0,0 +1,159 @@
+import { render, CustomElement, Host, ShadowDOM, defineElement, state, prop } from "@cerxes/csx";
+import { testContainer } from "../utils/test-container";
+import { nextAnimationFrame } from "../utils/next-animation-frame";
+
+
+const svgs = {
+    "/assets/icons/checkbox-checked.svg": [
+        `<svg fill="currentcolor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">`,
+        `<title>checkbox-checked</title>`,
+        `<g><path d="M401.7,411.8c-38,0-76.1,0-114.1,0c-55.6,0-111.2,0-166.8,0c-6.3,0-12.6,0-19,0c-1.1,0-2.3,0-3.4,0     c-0.5,0-1.1,0-1.5,0c-4.5,0.1,4.2,1.3,0,0c-0.9-0.3-2.2-0.8-3.2-0.9c-2.3-0.2,4,2.4,0.6,0.2c-0.2-0.1-3.4-1.9-3.3-2     c0.1-0.2,3.5,3.2,0.1-0.2c-0.6-0.6-1.2-1.2-1.7-1.9c1.8,2.4,2.1,2.7,0.8,0.9c-0.1-0.2-2-3.3-1.9-3.4c0.7-0.4,1.2,4.6,0.4,0.5     c-0.1-0.3-0.9-3.2-0.8-3.2c0.1,0.9,0.2,1.8,0.4,2.6c-0.1-0.9-0.1-1.8-0.1-2.7c0-0.2,0-0.5,0-0.7c0-1.5,0-3.1,0-4.6     c0-7.2,0-14.5,0-21.7c0-56.3,0-112.6,0-168.9c0-25.9,0-51.9,0-77.8c0-7.6,0-15.3,0-22.9c0-1.8,0-3.6,0-5.4c0-0.4,0-0.7,0-1.1     c0-0.5,0-1.1,0-1.5c0-3.3,0.5,1.4-0.3,1.3c0,0,1.1-5.2,1.4-5.1c0.1,0-2.2,4.2,0.2,0.1c2.4-4.1,0,0-0.2-0.2     c-0.1-0.1,2.5-2.6,2.7-2.8c2.9-3.1-3.7,2,0,0c0.7-0.4,1.5-0.9,2.2-1.3c3.6-2.3-4.2,1,0,0c0.3-0.1,3.8-1.1,3.9-1     c-3.1,0.4-3.5,0.4-1.3,0.3c0.5,0,0.9,0,1.4,0c0.9,0,1.8,0,2.6,0c5.9,0,11.8,0,17.7,0c24,0,48,0,72,0c58.1,0,116.3,0,174.4,0     c12.2,0,24.4-0.2,36.6,0c0.5,0,1.2,0,1.4,0c4.5-0.1-4.2-1.3,0,0c0.3,0.1,3.8,0.9,3.8,1.1c0,0.1-4.2-2.2-0.1,0.2     c4.1,2.4,0,0,0.2-0.2c0.1-0.1,2.1,2,2.3,2.2c3.5,3.1-1.2-2.7,0.5,0.5c0.1,0.2,2,3.3,1.9,3.4c-0.3,0.1-1.5-4.5-0.2,0.1     c0.1,0.4,0.2,0.9,0.3,1.3c0.4,2.2,0.4,1.7-0.1-1.3c0.1,0,0.1,2.7,0.1,2.7c0,0.2,0,0.5,0,0.7c0,4.5,0,9.1,0,13.7     c0,53.1,0,106.2,0,159.2c0,42.9,0.2,85.8,0,128.7c0,0.3,0,0.7,0,1c0,0.5,0,1.1,0,1.5c0.1,4.5,1.3-4.2,0,0     c-0.1,0.3-0.9,3.8-1.1,3.8c-0.1,0,2.2-4.2-0.2-0.1c-0.2,0.3-1.3,2.2-1.4,2.2c-0.2-0.1,3.2-3.5-0.2-0.1c-3.3,3.3,0,0,0.1,0.2     c0.1,0.2-3.1,1.9-3.3,2c-3.6,2.3,4.2-1,0,0c-0.3,0.1-3.8,1.1-3.9,1c0.9-0.1,1.8-0.2,2.6-0.4C403.5,411.7,402.6,411.8,401.7,411.8     c-10.5,0.2-20.5,9-20,20c0.5,10.6,8.8,20.3,20,20c27.8-0.6,49.6-22.6,50.1-50.3c0.1-4.1,0-8.3,0-12.4c0-22.3,0-44.6,0-67     c0-60,0-120.1,0-180.1c0-14.4,0.2-28.8,0-43.2c-0.3-23.1-16.1-44.8-39.4-49.4c-6.3-1.3-12.3-1.2-18.7-1.2     c-51.3,0-102.5,0-153.8,0c-46.5,0-93,0-139.5,0c-17.6,0-33,7.3-43.3,21.6c-7,9.7-9,21.1-9,32.8c0,18.3,0,36.6,0,54.8     c0,60.9,0,121.8,0,182.8c0,18.8,0,37.6,0,56.5c0,10.2,1.3,20,6.2,29.2c8.9,16.8,27,25.9,45.6,25.9c45.4,0.1,90.7,0,136.1,0     c52.2,0,104.4,0,156.7,0c3,0,6,0,9,0c10.5,0,20.5-9.2,20-20C421.2,420.9,412.9,411.8,401.7,411.8z"></path></g>`,
+        `<g><path d="M136.9,276.6c20,18,40,36,60.1,54.1c8.1,7.3,20.2,7.8,28.3,0c15.6-15,31.1-30,46.7-45.1     c24.7-23.8,49.4-47.7,74.1-71.5c5.7-5.5,11.4-11,17.2-16.6c7.5-7.3,7.9-21.1,0-28.3c-8.1-7.4-20.2-7.8-28.3,0     c-15.6,15-31.1,30-46.7,45.1c-24.7,23.8-49.4,47.7-74.1,71.5c-5.7,5.5-11.4,11-17.2,16.6c9.4,0,18.9,0,28.3,0     c-20-18-40-36-60.1-54.1c-7.8-7-20.7-8.2-28.3,0C129.9,256,128.6,269.2,136.9,276.6L136.9,276.6z"></path></g>`,
+        `</svg>`
+    ].join(''),
+    "/assets/icons/checkbox.svg": [
+        `<svg fill="currentcolor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">`,
+        `<title>checkbox</title>`,
+        `<g><path d="M401.7,411.8c-38,0-76.1,0-114.1,0c-55.6,0-111.2,0-166.8,0c-6.3,0-12.6,0-19,0c-1.1,0-2.3,0-3.4,0    c-0.5,0-1.1,0-1.5,0c-4.5,0.1,4.2,1.3,0,0c-0.9-0.3-2.2-0.8-3.2-0.9c-2.3-0.2,4,2.4,0.6,0.2c-0.2-0.1-3.4-1.9-3.3-2    c0.1-0.2,3.5,3.2,0.1-0.2c-0.6-0.6-1.2-1.2-1.7-1.9c1.8,2.4,2.1,2.7,0.8,0.9c-0.1-0.2-2-3.3-1.9-3.4c0.7-0.4,1.2,4.6,0.4,0.5    c-0.1-0.3-0.9-3.2-0.8-3.2c0.1,0.9,0.2,1.8,0.4,2.6c-0.1-0.9-0.1-1.8-0.1-2.7c0-0.2,0-0.5,0-0.7c0-1.5,0-3.1,0-4.6    c0-7.2,0-14.5,0-21.7c0-56.3,0-112.6,0-168.9c0-25.9,0-51.9,0-77.8c0-7.6,0-15.3,0-22.9c0-1.8,0-3.6,0-5.4c0-0.4,0-0.7,0-1.1    c0-0.5,0-1.1,0-1.5c0-3.3,0.5,1.4-0.3,1.3c0,0,1.1-5.2,1.4-5.1c0.1,0-2.2,4.2,0.2,0.1c2.4-4.1,0,0-0.2-0.2    c-0.1-0.1,2.5-2.6,2.7-2.8c2.9-3.1-3.7,2,0,0c0.7-0.4,1.5-0.9,2.2-1.3c3.6-2.3-4.2,1,0,0c0.3-0.1,3.8-1.1,3.9-1    c-3.1,0.4-3.5,0.4-1.3,0.3c0.5,0,0.9,0,1.4,0c0.9,0,1.8,0,2.6,0c5.9,0,11.8,0,17.7,0c24,0,48,0,72,0c58.1,0,116.3,0,174.4,0    c12.2,0,24.4-0.2,36.6,0c0.5,0,1.2,0,1.4,0c4.5-0.1-4.2-1.3,0,0c0.3,0.1,3.8,0.9,3.8,1.1c0,0.1-4.2-2.2-0.1,0.2    c4.1,2.4,0,0,0.2-0.2c0.1-0.1,2.1,2,2.3,2.2c3.5,3.1-1.2-2.7,0.5,0.5c0.1,0.2,2,3.3,1.9,3.4c-0.3,0.1-1.5-4.5-0.2,0.1    c0.1,0.4,0.2,0.9,0.3,1.3c0.4,2.2,0.4,1.7-0.1-1.3c0.1,0,0.1,2.7,0.1,2.7c0,0.2,0,0.5,0,0.7c0,4.5,0,9.1,0,13.7    c0,53.1,0,106.2,0,159.2c0,42.9,0.2,85.8,0,128.7c0,0.3,0,0.7,0,1c0,0.5,0,1.1,0,1.5c0.1,4.5,1.3-4.2,0,0    c-0.1,0.3-0.9,3.8-1.1,3.8c-0.1,0,2.2-4.2-0.2-0.1c-0.2,0.3-1.3,2.2-1.4,2.2c-0.2-0.1,3.2-3.5-0.2-0.1c-3.3,3.3,0,0,0.1,0.2    c0.1,0.2-3.1,1.9-3.3,2c-3.6,2.3,4.2-1,0,0c-0.3,0.1-3.8,1.1-3.9,1c0.9-0.1,1.8-0.2,2.6-0.4C403.5,411.7,402.6,411.8,401.7,411.8    c-10.5,0.2-20.5,9-20,20c0.5,10.6,8.8,20.3,20,20c27.8-0.6,49.6-22.6,50.1-50.3c0.1-4.1,0-8.3,0-12.4c0-22.3,0-44.6,0-67    c0-60,0-120.1,0-180.1c0-14.4,0.2-28.8,0-43.2c-0.3-23.1-16.1-44.8-39.4-49.4c-6.3-1.3-12.3-1.2-18.7-1.2c-51.3,0-102.5,0-153.8,0    c-46.5,0-93,0-139.5,0c-17.6,0-33,7.3-43.3,21.6c-7,9.7-9,21.1-9,32.8c0,18.3,0,36.6,0,54.8c0,60.9,0,121.8,0,182.8    c0,18.8,0,37.6,0,56.5c0,10.2,1.3,20,6.2,29.2c8.9,16.8,27,25.9,45.6,25.9c45.4,0.1,90.7,0,136.1,0c52.2,0,104.4,0,156.7,0    c3,0,6,0,9,0c10.5,0,20.5-9.2,20-20C421.2,420.9,412.9,411.8,401.7,411.8z"></path></g>`,
+        `</svg>`
+    ].join('')
+};
+
+const iconStyle = `:host { display: inline-block; }`;// The rest is left out
+
+
+describe("SVG Component tests", () => {
+    /**
+     * Assert that a basic component renders as expected
+     */
+    test("Simple example-component", async () => {
+    
+        let svgCache = new Map();
+        async function fetchSvg(svgUrl){
+            // Fake timer
+            await new Promise((resolve,reject)=>setTimeout(()=>resolve(), 1));
+            let svg = svgs[svgUrl];
+            if(svg){
+                return {
+                    text: ()=>svg
+                }
+            }else{
+                throw new Error("Not found");
+            }
+        }
+    
+        /**
+         * @param {string} svgUrl
+         * @returns {Promise<Element>}
+         */
+        async function loadSvg(svgUrl) {
+            const response = await fetchSvg(svgUrl);
+            const svgResource = await response.text();
+            const parser = new DOMParser();
+            const svgDocument = parser.parseFromString(svgResource, "image/svg+xml");
+            let svgElement = svgDocument.firstElementChild;
+            if (svgElement.hasAttribute("fill")) {
+                svgElement.setAttribute("fill", "currentcolor")
+            }
+            svgCache.set(svgUrl, svgElement);
+            return svgElement;
+        }
+    
+        @defineElement("test-icon")
+        class Icon extends CustomElement {
+            // Again JEST fucks this up in that these magically become read-only (probably not using our CSX-version of babel!)
+            @state()
+            set svgElement(value){ this.#svgElement = value};
+            get svgElement(){ return this.#svgElement};
+            #svgElement;
+        
+
+            /**
+             * @param {string} icon
+             */
+            @prop() set icon(icon) {
+                if(icon !== this.#icon) {
+                    this.#icon = icon;
+                
+                    this.updateIcon();
+                }
+            };
+            get icon(){
+                return this.#icon;
+            }
+            #icon;
+        
+            updateIcon(){
+                let icon = this.#icon;
+                const svgUrl = `/assets/icons/${icon}.svg`;
+                let cached = svgCache.get(svgUrl);
+                if(cached){
+                    // Use from cache (without passing by async functions, to optimize rendering loop!)
+                    this.svgElement = cached.cloneNode(true);
+                }else{
+                    loadSvg(svgUrl).then(svgEl=> {
+                        if(icon===this.#icon) {
+                            // If this is still the desired icon, load it
+                            this.svgElement = svgEl.cloneNode(true);
+                        }
+                    });
+                }
+            }
+        
+            render() {
+                return (
+                    <Host>
+                        <ShadowDOM>
+                            <style>{iconStyle}</style>
+                            <div className="icon">
+                                {this.svgElement}
+                            </div>
+                        </ShadowDOM>
+                    </Host>
+                );
+            }
+        }
+        
+        let initialVSpec = <Icon icon={'checkbox'}/>
+        let rendered = render(initialVSpec);
+        let container = testContainer(rendered);
+        
+        document.body.appendChild(container);// Components need to be added to the DOM or their connectecCallback will not be called
+        
+        expect(
+            container.innerHTML
+        ).toBe([
+            `<test-icon>`,
+            `</test-icon>`,
+        ].join(''));
+        
+        await new Promise((resolve,reject)=>setTimeout(()=>resolve(),10));
+        await nextAnimationFrame();
+    
+        expect(
+            rendered.shadowRoot.innerHTML
+        ).toBe([
+            `<style>${iconStyle}</style>`,
+            `<div class="icon">`,
+            svgs["/assets/icons/checkbox.svg"],
+            `</div>`
+        ].join(''));
+        
+        let updatedVSpec = <Icon icon={'checkbox-checked'}/>;
+        render(updatedVSpec, {host: rendered, old: initialVSpec});
+    
+        await new Promise((resolve,reject)=>setTimeout(()=>resolve(),10));
+        await nextAnimationFrame();
+    
+        expect(
+            rendered.shadowRoot.innerHTML
+        ).toBe([
+            `<style>${iconStyle}</style>`,
+            `<div class="icon">`,
+            svgs["/assets/icons/checkbox-checked.svg"],
+            `</div>`
+        ].join(''));
+        
+        document.body.removeChild(container);
+    });
+});

jest/postcss.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+    plugins: [
+        //require('autoprefixer'),
+        require('postcss-import'),
+        require('postcss-preset-env')({
+            stage: 1,
+        })
+    ]
+};

jest/render/basic-render.test.js

@@ -0,0 +1,262 @@
+import { render } from "@cerxes/csx";
+import { testContainer } from "../utils/test-container";
+
+describe("Basic elements", () => {
+    test("Single element", async () => {
+        expect(
+            testContainer(
+                render(
+                    <textarea />
+                )
+            ).innerHTML
+        ).toBe(
+            `<textarea></textarea>`
+        );
+    });
+    
+    test("With text-contents", async () => {
+        expect(
+            testContainer(
+                render(
+                    <div>Simple test</div>
+                )
+            ).innerHTML
+        ).toBe(
+            `<div>Simple test</div>`
+        );
+    });
+    
+    // TODO once added: fragments
+});
+
+describe("Native Attributes", () => {
+    test("Button-type", async () => {
+        expect(
+            testContainer(
+                render(
+                    <button type="submit">Save</button>
+                )
+            ).innerHTML
+        ).toBe(
+            `<button type="submit">Save</button>`
+        );
+    });
+    
+    test("Image-src", async () => {
+        expect(
+            testContainer(
+                render(
+                    <img src="/some-image.jpg"/>
+                )
+            ).innerHTML
+        ).toBe(
+            `<img src="/some-image.jpg">`
+        );
+    });
+    
+    // We're testing for native functionality of class here, not className
+    test("Class", async () => {
+        expect(
+            testContainer(
+                render(
+                    <div class="some-class"/>
+                )
+            ).innerHTML
+        ).toBe(
+            `<div class="some-class"></div>`
+        );
+    });
+    
+    // We're testing for native functionality of style here, which should always directly set style as an attribute
+    // when passed in as a string
+    test("Style", async () => {
+        expect(
+            testContainer(
+                render(
+                    <div style="width: 10em"/>
+                )
+            ).innerHTML
+        ).toBe(
+            `<div style="width: 10em"></div>`
+        );
+    });
+});
+
+describe("Basic Events", () => {
+    test("Click-event", async () => {
+        let clicked = false;
+        let clickHandler = (ev)=>{
+            clicked = true;
+            
+            // TODO test on properties that should be on a native click event
+        };
+        /** @type {HTMLButtonElement} */
+        let button = render(<button type="submit" onClick={clickHandler}>Save</button>);
+        
+        document.body.append(button);
+        button.click();
+        expect(clicked).toBe(true);
+        document.body.removeChild(button);
+    });
+    
+    test("Focus-event", async () => {
+        // This test exists just to have a second event to test, ideally we would have used two-part word event
+        // like focusin, but unfortunatily, it does not seem to be working. (probably JSDOM related?)
+        let focused = false;
+        let focusHandler = (ev)=>{
+            focused = true;
+        };
+        /** @type {HTMLButtonElement} */
+        let input = render(<input type="text" onFocus={focusHandler}/>);
+        
+        document.body.append(input);
+        input.focus();
+        expect(focused).toBe(true);
+        document.body.removeChild(input);
+    });
+});
+
+describe("Children", () => {
+    test("3 levels", async () => {
+        expect(
+            testContainer(
+                render(
+                    <div class="container">
+                        <button type="submit">
+                            Save
+                        </button>
+                    </div>
+                )
+            ).innerHTML
+        ).toBe(
+            `<div class="container"><button type="submit">Save</button></div>`
+        );
+    });
+    
+    test("Multiple children", async () => {
+        expect(
+            testContainer(
+                render(
+                    <div class="container">
+                        <h1>Title</h1>
+                        <p>
+                            Contents
+                        </p>
+                        <button type="submit">
+                            Save
+                        </button>
+                    </div>
+                )
+            ).innerHTML
+        ).toBe([
+            `<div class="container">`,
+            `<h1>Title</h1>`,
+            `<p>Contents</p>`,
+            `<button type="submit">Save</button>`,
+            `</div>`
+        ].join(''));
+    });
+    
+    test("Prerendered element", async () => {
+        let element = render(<h1>Title</h1>);
+        
+        expect(
+            testContainer(
+                render(
+                    <div class="container">
+                        {element}
+                    </div>
+                )
+            ).innerHTML
+        ).toBe([
+            `<div class="container">`,
+            `<h1>Title</h1>`,
+            `</div>`
+        ].join(''));
+    });
+    
+    test("Prerendered text", async () => {
+        // TODO: CSX doesn't support fragments yet (<>I am text</>)
+        let text = document.createTextNode(`I am text!`);
+        
+        expect(
+            testContainer(
+                render(
+                    <div class="container">
+                        {text}
+                    </div>
+                )
+            ).innerHTML
+        ).toBe([
+            `<div class="container">`,
+            `I am text!`,
+            `</div>`
+        ].join(''));
+    });
+    
+    test("Nulls and undefined are ignored", async () => {
+        expect(
+            testContainer(
+                render(
+                    <div class="container">
+                        <h1>Title</h1>
+                        {null}
+                        {undefined}
+                        <button>Save</button>
+                    </div>
+                )
+            ).innerHTML
+        ).toBe([
+            `<div class="container">`,
+            `<h1>Title</h1>`,
+            `<button>Save</button>`,
+            `</div>`
+        ].join(''));
+    });
+    
+    test("Update maintains the same elements where possible", async () => {
+        let initialVSpec = (
+            <div class="container">
+                <h1>Title</h1>
+                <button>Save</button>
+            </div>
+        );
+        let rendered = render(initialVSpec);
+        let container = testContainer(rendered);
+        
+        let children = Array.from(rendered.childNodes);// Capture current child-nodes
+        
+        expect(
+            container.innerHTML
+        ).toBe([
+            `<div class="container">`,
+            `<h1>Title</h1>`,
+            `<button>Save</button>`,
+            `</div>`
+        ].join(''));
+    
+        // Update it
+        let updatedVSpec = (
+            <div class="container">
+                <h1>Update</h1>
+                <button>Dismiss</button>
+            </div>
+        );
+        render(updatedVSpec, {host: rendered, old: initialVSpec});
+        expect(
+            container.innerHTML
+        ).toBe([
+            `<div class="container">`,
+            `<h1>Update</h1>`,
+            `<button>Dismiss</button>`,
+            `</div>`
+        ].join(''));
+    
+        let updatedChildren = Array.from(rendered.childNodes);// Capture current child-nodes
+        
+        expect(children.length).toBe(updatedChildren.length);
+        for(let i = 0; i < children.length; ++i){
+            expect(children[i] === updatedChildren[i]).toBe(true);// Expect the element to be the same by ref
+        }
+    });
+});

jest/render/key-property.test.js

@@ -0,0 +1,97 @@
+import { render } from "@cerxes/csx";
+import { testContainer } from "../utils/test-container";
+
+describe("Key-property tests", () => {
+    test("Keyed list", async () => {
+        let initialRendered = new Map();
+        let initIndexes = [1, 2, 3, 4];
+        
+        let makeSpec = (targetList, indexes)=>(
+            <ul>
+                {
+                    indexes.map(index => (
+                        <li id={`li_${index}`} key={index} ref={(el) => targetList.set(index, el)}>
+                            {index}
+                        </li>
+                    ))
+                }
+            </ul>
+        );
+        
+        let initialVSpec = makeSpec(initialRendered, initIndexes);
+        
+        let rendered = render(initialVSpec);
+        let container = testContainer(rendered);
+        
+        expect(container.innerHTML).toBe(
+            [
+                `<ul>`,
+                ...initIndexes.map(index=>`<li id="${`li_${index}`}">${index}</li>`),
+                `</ul>`
+            ].join('')
+        );
+        
+        expect(initialRendered.size).toBe(4);
+        for(let rendered of initialRendered){
+            expect(rendered).not.toBeUndefined();
+        }
+        
+        // Reverse order
+        let reorderedIndexes = [4,3,2,1];
+        let rerenderedIndexes = new Map(initialRendered);
+        let updatedVSpec =  makeSpec(rerenderedIndexes, reorderedIndexes);
+        render(updatedVSpec, {host: rendered, old: initialVSpec});
+    
+        // Updated (reverse order)
+        expect(container.innerHTML).toBe(
+            [
+                `<ul>`,
+                ...reorderedIndexes.map(index=>`<li id="${`li_${index}`}">${index}</li>`),
+                `</ul>`
+            ].join('')
+        );
+    
+        // Validate that items were merely re-arranged and not re-created
+        expect(rerenderedIndexes.size).toBe(4);
+        for(let i of initIndexes){
+            let initRendered = initialRendered.get(i);
+            let reorderedRendered = rerenderedIndexes.get(i);
+            expect(initRendered === reorderedRendered).toBe(true); // These should've remained the same
+        }
+    
+        // Add items and change order
+        let additionalIndexes = [0, 1, 2.5, 2, 3, 4, 5.5];
+        let additionalRerenderedIndexes = new Map(initialRendered);
+        let secondUpdatedVSpec =  makeSpec(additionalRerenderedIndexes, additionalIndexes);
+        render(secondUpdatedVSpec, {host: rendered, old: updatedVSpec});// Is this host right? it seems inconsistent and the source of our bug (as it is probably also misused in custom-elements)
+    
+        // Validate add items and changed order
+        expect(container.innerHTML).toBe(
+            [
+                `<ul>`,
+                ...additionalIndexes.map(index=>`<li id="${`li_${index}`}">${index}</li>`),
+                `</ul>`
+            ].join('')
+        );
+    
+        // Validate that items were merely re-arranged and not re-created
+        expect(additionalRerenderedIndexes.size).toBe(additionalIndexes.length);
+        for(let i of initIndexes){
+            let initRendered = initialRendered.get(i);
+            let additionalRendered = additionalRerenderedIndexes.get(i);
+            expect(initRendered === additionalRendered).toBe(true); // These should've still remained the same
+        }
+    
+        // Revert back to the original
+        render(initialVSpec, {host: rendered, old: secondUpdatedVSpec});// Is this host right? it seems inconsistent and the source of our bug (as it is probably also misused in custom-elements)
+    
+        // Validate reverting back to the original
+        expect(container.innerHTML).toBe(
+            [
+                `<ul>`,
+                ...initIndexes.map(index=>`<li id="${`li_${index}`}">${index}</li>`),
+                `</ul>`
+            ].join('')
+        );
+    });
+});

jest/render/ref-property.test.js

@@ -0,0 +1,17 @@
+import { render, Host } from "@cerxes/csx";
+import { testContainer } from "../utils/test-container";
+
+describe("Ref-property tests", () => {
+    test("Simple ref", async () => {
+        let targetVar = null;
+        let refHandler = (el)=>targetVar = el;
+        let container = testContainer(render(<div id="test-div" ref={refHandler}/>));
+        
+        expect(container.innerHTML).toBe(
+            `<div id="test-div"></div>`
+        );
+        
+        expect(targetVar).not.toBe(null);
+        expect(targetVar.id).toBe('test-div')
+    });
+});

jest/render/render-opts.test.js

@@ -0,0 +1,44 @@
+import { render, Host } from "@cerxes/csx";
+import { testContainer } from "../utils/test-container";
+
+describe("Basic render-options", () => {
+    test("opts.host", async () => {
+        let startElement = render(<div />);
+        let container = testContainer([startElement]);
+        
+        render(<Host style="width: 10em">Contents</Host>, {host: startElement});
+        
+        expect(container.innerHTML).toBe(
+            `<div style="width: 10em">Contents</div>`
+        );
+    });
+    
+    test("opts.vnode", async () => {
+        let container = testContainer();
+        
+        let initialVSpec = (
+            <Host>
+                <h1>Initial title</h1>
+            </Host>
+        );
+        
+        let updatedVSpec = (
+            <Host>
+                <h1>Updated title</h1>
+            </Host>
+        );
+        render(initialVSpec, {host: container});
+        
+        // Initial
+        expect(container.innerHTML).toBe(
+            `<h1>Initial title</h1>`
+        );
+    
+        render(updatedVSpec, {host: container, old: initialVSpec});
+        
+        // Updated
+        expect(container.innerHTML).toBe(
+            `<h1>Updated title</h1>`
+        );
+    });
+});

jest/render/svg-rendering.test.js

@@ -0,0 +1,62 @@
+import { render } from "@cerxes/csx";
+import { testContainer } from "../utils/test-container";
+
+describe("SVG-rendering test", () => {
+    test("Simple", async () => {
+        let makeSpec = (stroke, strokeWidth) => (
+            <svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg"
+                 stroke={stroke}>
+                <g fill="none" fill-rule="evenodd">
+                    <g transform="translate(1 1)" stroke-width={strokeWidth}>
+                        <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
+                        <path d="M36 18c0-9.94-8.06-18-18-18">
+                            <animateTransform
+                                attributeName="transform"
+                                type="rotate"
+                                from="0 18 18"
+                                to="360 18 18"
+                                dur="1s"
+                                repeatCount="indefinite"/>
+                        </path>
+                    </g>
+                </g>
+            </svg>
+        )
+        let initialVSpec = makeSpec("#000", 2);
+        let rendered = render(initialVSpec);
+        let container = testContainer(rendered);
+        
+        expect(container.innerHTML).toBe([
+            `<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#000">`,
+            `<g fill="none" fill-rule="evenodd">`,
+            `<g transform="translate(1 1)" stroke-width="2">`,
+            `<circle stroke-opacity=".5" cx="18" cy="18" r="18">`,
+            `</circle>`,
+            `<path d="M36 18c0-9.94-8.06-18-18-18">`,
+            `<animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="1s" repeatCount="indefinite">`,
+            `</animateTransform>`,
+            `</path>`,
+            `</g>`,
+            `</g>`,
+            `</svg>`
+        ].join(''));
+        
+        let updatedVSpec = makeSpec("#FFF", 4);
+        render(updatedVSpec, { host: rendered, old: initialVSpec });
+        
+        expect(container.innerHTML).toBe([
+            `<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#FFF">`,
+            `<g fill="none" fill-rule="evenodd">`,
+            `<g transform="translate(1 1)" stroke-width="4">`,
+            `<circle stroke-opacity=".5" cx="18" cy="18" r="18">`,
+            `</circle>`,
+            `<path d="M36 18c0-9.94-8.06-18-18-18">`,
+            `<animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="1s" repeatCount="indefinite">`,
+            `</animateTransform>`,
+            `</path>`,
+            `</g>`,
+            `</g>`,
+            `</svg>`
+        ].join(''));
+    });
+});

jest/utils/next-animation-frame.js

@@ -0,0 +1,7 @@
+/**
+ * @returns {Promise<void>}
+ */
+export async function nextAnimationFrame(inFrame){
+    // Await the next animation frame
+    await new Promise((resolve,reject)=>requestAnimationFrame(()=>resolve()));
+}

jest/utils/test-container.js

@@ -0,0 +1,13 @@
+/**
+ * @returns {HTMLDivElement}
+ */
+export function testContainer(elements){
+    let container =  document.createElement('div');
+    if(elements){
+        if(!(elements instanceof Array)){
+            elements = [elements];
+        }
+        container.append(...elements);
+    }
+    return container;
+}

package.json

@@ -3,42 +3,47 @@
   "version": "0.0.1",
   "dependencies": {},
   "devDependencies": {
-    "@babel/cli": "latest",
+    "@babel/register": "csx",
-    "@babel/core": "7.7.0",
+    "@babel/cli": "csx",
-    "@babel/plugin-proposal-class-properties": "latest",
+    "@babel/core": "csx",
-    "@babel/plugin-proposal-decorators": "latest",
+    "@babel/plugin-proposal-class-properties": "csx",
-    "@babel/plugin-proposal-export-default-from": "latest",
+    "@babel/plugin-proposal-decorators": "csx",
-    "@babel/plugin-proposal-export-namespace-from": "latest",
+    "@babel/plugin-proposal-export-default-from": "csx",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "latest",
+    "@babel/plugin-proposal-export-namespace-from": "csx",
-    "@babel/plugin-proposal-optional-chaining": "latest",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "csx",
-    "@babel/plugin-proposal-private-methods": "latest",
+    "@babel/plugin-proposal-optional-chaining": "csx",
-    "@babel/plugin-transform-react-jsx": "latest",
+    "@babel/plugin-proposal-private-methods": "csx",
-    "@babel/preset-env": "latest",
+    "@babel/plugin-transform-react-jsx": "csx",
+    "@babel/preset-env": "csx",
     "jsdoc": "latest",
     "sass": "latest",
     "rollup": "latest",
-    "rollup-plugin-babel": "latest",
+    "rollup-plugin-babel": "csx",
     "rollup-plugin-node-resolve": "latest",
     "rollup-plugin-commonjs": "latest",
+    "rollup-plugin-json": "latest",
+    "rollup-plugin-postcss": "latest",
     "rollup-plugin-terser": "latest",
-    "rollup-plugin-copy": "latest",
+    "@cerxes/host": "latest",
-    "rollup-plugin-sass": "latest",
+    "postcss": "latest",
+    "postcss-preset-env": "latest",
+    "postcss-import": "latest",
     "serve": "latest",
-    "npm-run-all": "latest"
+    "npm-run-all": "latest",
+    "jest-environment-jsdom-sixteen": "latest",
+    "jest": "csx"
   },
   "scripts": {
-    "dev": "npm-run-all -p watch start:test",
+    "test": "jest",
-    "build": "npm-run-all -s build:babel-transform-csx build:csx-custom-elements build:test",
+    "dev": "npm-run-all -p watch:babel-transform-csx watch:csx watch:examples serve:examples",
-    "watch": "npm-run-all -p watch:babel-transform-csx watch:csx-custom-elements watch:test",
+    "build": "npm-run-all -s build:babel-transform-csx build:csx build:examples",
-    "start:test": "serve public",
+    "watch": "npm-run-all -p watch:babel-transform-csx watch:csx watch:examples",
-    "build:test": "rollup -c",
+    "build:examples": "node -r @babel/register examples/cfg/rollup-build.js build",
-    "watch:test": "rollup -c -w",
+    "watch:examples": "node -r @babel/register examples/cfg/rollup-build.js watch",
-    "build:babel-transform-csx": "cd ./packages/babel-plugin-transform-csx-jsx && npm run build",
+    "serve:examples": "serve public",
-    "build:csx-custom-elements": "cd ./packages/csx-custom-elements && npm run build",
+    "build:babel-transform-csx": "cd packages/babel-plugin-transform-csx && npm run build",
-    "watch:babel-transform-csx": "cd ./packages/babel-plugin-transform-csx-jsx && npm run watch",
+    "build:csx": "cd packages/csx && npm run build",
-    "watch:csx-custom-elements": "cd ./packages/csx-custom-elements && npm run watch"
+    "watch:babel-transform-csx": "cd packages/babel-plugin-transform-csx && npm run watch",
-  },
+    "watch:csx": "cd packages/csx && npm run watch"
-  "resolutions": {
-    "@babel/helpers": "file:./packages/babel-helpers"
   }
 }

packages/babel-helpers/.npmignore

@@ -1,3 +0,0 @@
-src
-test
-*.log

packages/babel-helpers/README.md

@@ -1,19 +0,0 @@
-# @babel/helpers
-
-> Collection of helper functions used by Babel transforms.
-
-See our website [@babel/helpers](https://babeljs.io/docs/en/next/babel-helpers.html) for more information.
-
-## Install
-
-Using npm:
-
-```sh
-npm install --save-dev @babel/helpers
-```
-
-or using yarn:
-
-```sh
-yarn add @babel/helpers --dev
-```

packages/babel-helpers/lib/index.js

@@ -1,276 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.get = get;
-exports.minVersion = minVersion;
-exports.getDependencies = getDependencies;
-exports.ensure = ensure;
-exports.default = exports.list = void 0;
-
-var _traverse = _interopRequireDefault(require("@babel/traverse"));
-
-var t = _interopRequireWildcard(require("@babel/types"));
-
-var _helpers = _interopRequireDefault(require("./helpers"));
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function makePath(path) {
-  const parts = [];
-
-  for (; path.parentPath; path = path.parentPath) {
-    parts.push(path.key);
-    if (path.inList) parts.push(path.listKey);
-  }
-
-  return parts.reverse().join(".");
-}
-
-function getHelperMetadata(file) {
-  const globals = new Set();
-  const localBindingNames = new Set();
-  const dependencies = new Map();
-  let exportName;
-  let exportPath;
-  const exportBindingAssignments = [];
-  const importPaths = [];
-  const importBindingsReferences = [];
-  (0, _traverse.default)(file, {
-    ImportDeclaration(child) {
-      const name = child.node.source.value;
-
-      if (!_helpers.default[name]) {
-        throw child.buildCodeFrameError(`Unknown helper ${name}`);
-      }
-
-      if (child.get("specifiers").length !== 1 || !child.get("specifiers.0").isImportDefaultSpecifier()) {
-        throw child.buildCodeFrameError("Helpers can only import a default value");
-      }
-
-      const bindingIdentifier = child.node.specifiers[0].local;
-      dependencies.set(bindingIdentifier, name);
-      importPaths.push(makePath(child));
-    },
-
-    ExportDefaultDeclaration(child) {
-      const decl = child.get("declaration");
-
-      if (decl.isFunctionDeclaration()) {
-        if (!decl.node.id) {
-          throw decl.buildCodeFrameError("Helpers should give names to their exported func declaration");
-        }
-
-        exportName = decl.node.id.name;
-      }
-
-      exportPath = makePath(child);
-    },
-
-    ExportAllDeclaration(child) {
-      throw child.buildCodeFrameError("Helpers can only export default");
-    },
-
-    ExportNamedDeclaration(child) {
-      throw child.buildCodeFrameError("Helpers can only export default");
-    },
-
-    Statement(child) {
-      if (child.isModuleDeclaration()) return;
-      child.skip();
-    }
-
-  });
-  (0, _traverse.default)(file, {
-    Program(path) {
-      const bindings = path.scope.getAllBindings();
-      Object.keys(bindings).forEach(name => {
-        if (name === exportName) return;
-        if (dependencies.has(bindings[name].identifier)) return;
-        localBindingNames.add(name);
-      });
-    },
-
-    ReferencedIdentifier(child) {
-      const name = child.node.name;
-      const binding = child.scope.getBinding(name, true);
-
-      if (!binding) {
-        globals.add(name);
-      } else if (dependencies.has(binding.identifier)) {
-        importBindingsReferences.push(makePath(child));
-      }
-    },
-
-    AssignmentExpression(child) {
-      const left = child.get("left");
-      if (!(exportName in left.getBindingIdentifiers())) return;
-
-      if (!left.isIdentifier()) {
-        throw left.buildCodeFrameError("Only simple assignments to exports are allowed in helpers");
-      }
-
-      const binding = child.scope.getBinding(exportName);
-
-      if (binding && binding.scope.path.isProgram()) {
-        exportBindingAssignments.push(makePath(child));
-      }
-    }
-
-  });
-  if (!exportPath) throw new Error("Helpers must default-export something.");
-  exportBindingAssignments.reverse();
-  return {
-    globals: Array.from(globals),
-    localBindingNames: Array.from(localBindingNames),
-    dependencies,
-    exportBindingAssignments,
-    exportPath,
-    exportName,
-    importBindingsReferences,
-    importPaths
-  };
-}
-
-function permuteHelperAST(file, metadata, id, localBindings, getDependency) {
-  if (localBindings && !id) {
-    throw new Error("Unexpected local bindings for module-based helpers.");
-  }
-
-  if (!id) return;
-  const {
-    localBindingNames,
-    dependencies,
-    exportBindingAssignments,
-    exportPath,
-    exportName,
-    importBindingsReferences,
-    importPaths
-  } = metadata;
-  const dependenciesRefs = {};
-  dependencies.forEach((name, id) => {
-    dependenciesRefs[id.name] = typeof getDependency === "function" && getDependency(name) || id;
-  });
-  const toRename = {};
-  const bindings = new Set(localBindings || []);
-  localBindingNames.forEach(name => {
-    let newName = name;
-
-    while (bindings.has(newName)) newName = "_" + newName;
-
-    if (newName !== name) toRename[name] = newName;
-  });
-
-  if (id.type === "Identifier" && exportName !== id.name) {
-    toRename[exportName] = id.name;
-  }
-
-  (0, _traverse.default)(file, {
-    Program(path) {
-      const exp = path.get(exportPath);
-      const imps = importPaths.map(p => path.get(p));
-      const impsBindingRefs = importBindingsReferences.map(p => path.get(p));
-      const decl = exp.get("declaration");
-
-      if (id.type === "Identifier") {
-        if (decl.isFunctionDeclaration()) {
-          exp.replaceWith(decl);
-        } else {
-          exp.replaceWith(t.variableDeclaration("var", [t.variableDeclarator(id, decl.node)]));
-        }
-      } else if (id.type === "MemberExpression") {
-        if (decl.isFunctionDeclaration()) {
-          exportBindingAssignments.forEach(assignPath => {
-            const assign = path.get(assignPath);
-            assign.replaceWith(t.assignmentExpression("=", id, assign.node));
-          });
-          exp.replaceWith(decl);
-          path.pushContainer("body", t.expressionStatement(t.assignmentExpression("=", id, t.identifier(exportName))));
-        } else {
-          exp.replaceWith(t.expressionStatement(t.assignmentExpression("=", id, decl.node)));
-        }
-      } else {
-        throw new Error("Unexpected helper format.");
-      }
-
-      Object.keys(toRename).forEach(name => {
-        path.scope.rename(name, toRename[name]);
-      });
-
-      for (const path of imps) path.remove();
-
-      for (const path of impsBindingRefs) {
-        const node = t.cloneNode(dependenciesRefs[path.node.name]);
-        path.replaceWith(node);
-      }
-
-      path.stop();
-    }
-
-  });
-}
-
-const helperData = Object.create(null);
-
-function loadHelper(name) {
-  if (!helperData[name]) {
-    const helper = _helpers.default[name];
-
-    if (!helper) {
-      throw Object.assign(new ReferenceError(`Unknown helper ${name}`), {
-        code: "BABEL_HELPER_UNKNOWN",
-        helper: name
-      });
-    }
-
-    const fn = () => {
-      return t.file(helper.ast());
-    };
-
-    const metadata = getHelperMetadata(fn());
-    helperData[name] = {
-      build(getDependency, id, localBindings) {
-        const file = fn();
-        permuteHelperAST(file, metadata, id, localBindings, getDependency);
-        return {
-          nodes: file.program.body,
-          globals: metadata.globals
-        };
-      },
-
-      minVersion() {
-        return helper.minVersion;
-      },
-
-      dependencies: metadata.dependencies
-    };
-  }
-
-  return helperData[name];
-}
-
-function get(name, getDependency, id, localBindings) {
-  return loadHelper(name).build(getDependency, id, localBindings);
-}
-
-function minVersion(name) {
-  return loadHelper(name).minVersion();
-}
-
-function getDependencies(name) {
-  return Array.from(loadHelper(name).dependencies.values());
-}
-
-function ensure(name) {
-  loadHelper(name);
-}
-
-const list = Object.keys(_helpers.default).map(name => name.replace(/^_/, "")).filter(name => name !== "__esModule");
-exports.list = list;
-var _default = get;
-exports.default = _default;

packages/babel-helpers/package.json

@@ -1,21 +0,0 @@
-{
-  "name": "@babel/helpers",
-  "version": "7.7.0",
-  "description": "Collection of helper functions used by Babel transforms.",
-  "author": "Sebastian McKenzie <sebmck@gmail.com>",
-  "homepage": "https://babeljs.io/",
-  "license": "MIT",
-  "publishConfig": {
-    "access": "public"
-  },
-  "repository": "https://github.com/babel/babel/tree/master/packages/babel-helpers",
-  "main": "lib/index.js",
-  "dependencies": {
-    "@babel/template": "^7.7.0",
-    "@babel/traverse": "^7.7.0",
-    "@babel/types": "^7.7.0"
-  },
-  "devDependencies": {
-    "@babel/helper-plugin-test-runner": "^7.0.0"
-  }
-}

packages/babel-helpers/src/index.js

@@ -1,291 +0,0 @@
-import traverse from "@babel/traverse";
-import * as t from "@babel/types";
-import helpers from "./helpers";
-
-function makePath(path) {
-  const parts = [];
-
-  for (; path.parentPath; path = path.parentPath) {
-    parts.push(path.key);
-    if (path.inList) parts.push(path.listKey);
-  }
-
-  return parts.reverse().join(".");
-}
-
-/**
- * Given a file AST for a given helper, get a bunch of metadata about it so that Babel can quickly render
- * the helper is whatever context it is needed in.
- */
-function getHelperMetadata(file) {
-  const globals = new Set();
-  const localBindingNames = new Set();
-  // Maps imported identifier -> helper name
-  const dependencies = new Map();
-
-  let exportName;
-  let exportPath;
-  const exportBindingAssignments = [];
-  const importPaths = [];
-  const importBindingsReferences = [];
-
-  traverse(file, {
-    ImportDeclaration(child) {
-      const name = child.node.source.value;
-      if (!helpers[name]) {
-        throw child.buildCodeFrameError(`Unknown helper ${name}`);
-      }
-      if (
-        child.get("specifiers").length !== 1 ||
-        !child.get("specifiers.0").isImportDefaultSpecifier()
-      ) {
-        throw child.buildCodeFrameError(
-          "Helpers can only import a default value",
-        );
-      }
-      const bindingIdentifier = child.node.specifiers[0].local;
-      dependencies.set(bindingIdentifier, name);
-      importPaths.push(makePath(child));
-    },
-    ExportDefaultDeclaration(child) {
-      const decl = child.get("declaration");
-
-      if (decl.isFunctionDeclaration()) {
-        if (!decl.node.id) {
-          throw decl.buildCodeFrameError(
-            "Helpers should give names to their exported func declaration",
-          );
-        }
-
-        exportName = decl.node.id.name;
-      }
-      exportPath = makePath(child);
-    },
-    ExportAllDeclaration(child) {
-      throw child.buildCodeFrameError("Helpers can only export default");
-    },
-    ExportNamedDeclaration(child) {
-      throw child.buildCodeFrameError("Helpers can only export default");
-    },
-    Statement(child) {
-      if (child.isModuleDeclaration()) return;
-
-      child.skip();
-    },
-  });
-
-  traverse(file, {
-    Program(path) {
-      const bindings = path.scope.getAllBindings();
-
-      Object.keys(bindings).forEach(name => {
-        if (name === exportName) return;
-        if (dependencies.has(bindings[name].identifier)) return;
-
-        localBindingNames.add(name);
-      });
-    },
-    ReferencedIdentifier(child) {
-      const name = child.node.name;
-      const binding = child.scope.getBinding(name, /* noGlobal */ true);
-      if (!binding) {
-        globals.add(name);
-      } else if (dependencies.has(binding.identifier)) {
-        importBindingsReferences.push(makePath(child));
-      }
-    },
-    AssignmentExpression(child) {
-      const left = child.get("left");
-
-      if (!(exportName in left.getBindingIdentifiers())) return;
-
-      if (!left.isIdentifier()) {
-        throw left.buildCodeFrameError(
-          "Only simple assignments to exports are allowed in helpers",
-        );
-      }
-
-      const binding = child.scope.getBinding(exportName);
-
-      if (binding && binding.scope.path.isProgram()) {
-        exportBindingAssignments.push(makePath(child));
-      }
-    },
-  });
-
-  if (!exportPath) throw new Error("Helpers must default-export something.");
-
-  // Process these in reverse so that mutating the references does not invalidate any later paths in
-  // the list.
-  exportBindingAssignments.reverse();
-
-  return {
-    globals: Array.from(globals),
-    localBindingNames: Array.from(localBindingNames),
-    dependencies,
-    exportBindingAssignments,
-    exportPath,
-    exportName,
-    importBindingsReferences,
-    importPaths,
-  };
-}
-
-/**
- * Given a helper AST and information about how it will be used, update the AST to match the usage.
- */
-function permuteHelperAST(file, metadata, id, localBindings, getDependency) {
-  if (localBindings && !id) {
-    throw new Error("Unexpected local bindings for module-based helpers.");
-  }
-
-  if (!id) return;
-
-  const {
-    localBindingNames,
-    dependencies,
-    exportBindingAssignments,
-    exportPath,
-    exportName,
-    importBindingsReferences,
-    importPaths,
-  } = metadata;
-
-  const dependenciesRefs = {};
-  dependencies.forEach((name, id) => {
-    dependenciesRefs[id.name] =
-      (typeof getDependency === "function" && getDependency(name)) || id;
-  });
-
-  const toRename = {};
-  const bindings = new Set(localBindings || []);
-  localBindingNames.forEach(name => {
-    let newName = name;
-    while (bindings.has(newName)) newName = "_" + newName;
-
-    if (newName !== name) toRename[name] = newName;
-  });
-
-  if (id.type === "Identifier" && exportName !== id.name) {
-    toRename[exportName] = id.name;
-  }
-
-  traverse(file, {
-    Program(path) {
-      // We need to compute these in advance because removing nodes would
-      // invalidate the paths.
-      const exp = path.get(exportPath);
-      const imps = importPaths.map(p => path.get(p));
-      const impsBindingRefs = importBindingsReferences.map(p => path.get(p));
-
-      const decl = exp.get("declaration");
-      if (id.type === "Identifier") {
-        if (decl.isFunctionDeclaration()) {
-          exp.replaceWith(decl);
-        } else {
-          exp.replaceWith(
-            t.variableDeclaration("var", [t.variableDeclarator(id, decl.node)]),
-          );
-        }
-      } else if (id.type === "MemberExpression") {
-        if (decl.isFunctionDeclaration()) {
-          exportBindingAssignments.forEach(assignPath => {
-            const assign = path.get(assignPath);
-            assign.replaceWith(t.assignmentExpression("=", id, assign.node));
-          });
-          exp.replaceWith(decl);
-          path.pushContainer(
-            "body",
-            t.expressionStatement(
-              t.assignmentExpression("=", id, t.identifier(exportName)),
-            ),
-          );
-        } else {
-          exp.replaceWith(
-            t.expressionStatement(t.assignmentExpression("=", id, decl.node)),
-          );
-        }
-      } else {
-        throw new Error("Unexpected helper format.");
-      }
-
-      Object.keys(toRename).forEach(name => {
-        path.scope.rename(name, toRename[name]);
-      });
-
-      for (const path of imps) path.remove();
-      for (const path of impsBindingRefs) {
-        const node = t.cloneNode(dependenciesRefs[path.node.name]);
-        path.replaceWith(node);
-      }
-
-      // We only use "traverse" for all the handy scoping helpers, so we can stop immediately without
-      // actually doing the traversal.
-      path.stop();
-    },
-  });
-}
-
-const helperData = Object.create(null);
-function loadHelper(name) {
-  if (!helperData[name]) {
-    const helper = helpers[name];
-    if (!helper) {
-      throw Object.assign(new ReferenceError(`Unknown helper ${name}`), {
-        code: "BABEL_HELPER_UNKNOWN",
-        helper: name,
-      });
-    }
-
-    const fn = () => {
-      return t.file(helper.ast());
-    };
-
-    const metadata = getHelperMetadata(fn());
-
-    helperData[name] = {
-      build(getDependency, id, localBindings) {
-        const file = fn();
-        permuteHelperAST(file, metadata, id, localBindings, getDependency);
-
-        return {
-          nodes: file.program.body,
-          globals: metadata.globals,
-        };
-      },
-      minVersion() {
-        return helper.minVersion;
-      },
-      dependencies: metadata.dependencies,
-    };
-  }
-
-  return helperData[name];
-}
-
-export function get(
-  name,
-  getDependency?: string => ?t.Expression,
-  id?,
-  localBindings?: string[],
-) {
-  return loadHelper(name).build(getDependency, id, localBindings);
-}
-
-export function minVersion(name: string) {
-  return loadHelper(name).minVersion();
-}
-
-export function getDependencies(name: string): $ReadOnlyArray<string> {
-  return Array.from(loadHelper(name).dependencies.values());
-}
-
-export function ensure(name: string) {
-  loadHelper(name);
-}
-
-export const list = Object.keys(helpers)
-  .map(name => name.replace(/^_/, ""))
-  .filter(name => name !== "__esModule");
-
-export default get;

packages/babel-helpers/test/fixtures/dependencies/basic/input.js

@@ -1 +0,0 @@
-REPLACE_ME;

packages/babel-helpers/test/fixtures/dependencies/basic/options.json

@@ -1,3 +0,0 @@
-{
-  "plugins": ["./plugin"]
-}

packages/babel-helpers/test/fixtures/dependencies/basic/output.js

@@ -1,5 +0,0 @@
-function _$_basic_main() { return _$_basic_dependency(); }
-
-function _$_basic_dependency() {}
-
-_$_basic_main;

packages/babel-helpers/test/fixtures/dependencies/basic/plugin.js

@@ -1,25 +0,0 @@
-const defineHelper = require("../../../helpers/define-helper").default;
-
-const dependency = defineHelper(__dirname, "dependency", `
-  export default function fn() {}
-`);
-
-const main = defineHelper(__dirname, "main", `
-  import dep from "${dependency}";
-
-  export default function helper() {
-    return dep();
-  }
-`);
-
-module.exports = function() {
-  return {
-    visitor: {
-      Identifier(path) {
-        if (path.node.name !== "REPLACE_ME") return;
-        const helper = this.addHelper(main);
-        path.replaceWith(helper);
-      },
-    },
-  };
-};

packages/babel-helpers/test/fixtures/dependencies/deep/input.js

@@ -1 +0,0 @@
-REPLACE_ME;

packages/babel-helpers/test/fixtures/dependencies/deep/options.json

@@ -1,3 +0,0 @@
-{
-  "plugins": ["./plugin"]
-}