experimenting with jsx

src/common/core/BaseElement/BaseElement.ts

@@ -79,7 +79,14 @@ class BaseElement extends HTMLElement {
 	updateCallback = (): void => {};
 
 	update = (): void => {
-		render(this.render(), this);
+		let _rendered = this.render();
+		console.log(typeof _rendered, _rendered);
+		if (typeof _rendered === 'string') {
+			const strings: any = [_rendered];
+			console.log('Mwa', strings);
+			_rendered = html(strings);
+		}
+		render(_rendered, this);
 		if (this.shadowRoot) {
 			const renderSlot = () => html`<slot><slot></slot></slot>`;
 			render(renderSlot(), this.shadowRoot);

src/common/pages/BasePageElement/BasePageElement.ts

@@ -1,7 +1,6 @@
 import { attr } from '@github/catalyst';
-import { html, render } from 'core/utils';
+import { html, render, isTrue, TemplateResult } from 'core/utils';
 import { BaseElement } from 'common/';
-import { isTrue } from 'core/utils';
 
 class BasePageElement extends BaseElement {
 	public _pageTitle: string = '';
@@ -31,7 +30,12 @@ class BasePageElement extends BaseElement {
 	};
 
 	update = (): void => {
-		const _render = () => html` ${this.renderTitle()} ${this.render()} `;
+		let renderPage = this.render();
+		if (typeof renderPage === 'string') {
+			const strings: any = [renderPage];
+			renderPage = html(strings);
+		}
+		const _render = () => html` ${this.renderTitle()} ${renderPage} `;
 		render(_render(), this);
 		this.bindEvents('app-action');
 		this.updateCallback();

src/components/app-form/AppFormElementTemplate.ts

@@ -1,44 +0,0 @@
-import { html, isTrue, nothing, TemplateResult } from 'core/utils';
-
-export default (props): TemplateResult => {
-	const { renderInput, customRender, error, isValid, hasCancel } = props;
-	const renderSubmit = (valid: boolean) => {
-		if (!valid) {
-			return html`
-				<button class="btn btn-squared btn-primary --submit disabled" type="submit" disabled>Submit</button>
-			`;
-		}
-		return html` <button class="btn btn-squared btn-primary --submit" type="submit">Submit</button> `;
-	};
-	const renderError = (error: string) => {
-		if (error) {
-			return html`<span>${error}</span>`;
-		}
-		return html``;
-	};
-	const renderCancel = (hasCancel: boolean) => {
-		if (hasCancel) {
-			return html`<button class="btn btn-squared btn-red --cancel" type="button" app-action="click:app-form#goBack">
-				Cancel
-			</button>`;
-		}
-		return html``;
-	};
-
-	return html`
-		<div class="app-form">
-			<form
-				app-action="submit:app-form#onSubmit"
-				data-target="app-form.formElement"
-				autocomplete="on"
-				method="POST"
-				action="javascript:void(0)"
-			>
-				${renderInput ? customRender() : html`<slot data-target="app-form.innerSlot"></slot>`} ${renderError(error)}
-				<div class="form-buttons">
-					<div class="button-content">${renderSubmit(isValid)}${renderCancel(isTrue(hasCancel))}</div>
-				</div>
-			</form>
-		</div>
-	`;
-};

src/components/app-form/AppFormElementTemplate.tsx

@@ -0,0 +1,65 @@
+/** @jsx createElement */
+/** @jsx.Frag Fragment */
+
+import { html, isTrue, nothing, TemplateResult, createElement, Fragment } from 'core/utils';
+
+const renderSubmit = (valid: boolean) => {
+	if (!valid) {
+		return (
+			<button class="btn btn-squared btn-primary --submit disabled" type="submit" disabled>
+				Submit
+			</button>
+		);
+	}
+	return (
+		<button class="btn btn-squared btn-primary --submit" type="submit">
+			Submit
+		</button>
+	);
+};
+const renderError = (error: string) => {
+	if (error) {
+		return <span>${error}</span>;
+	}
+	return null;
+};
+const renderCancel = (hasCancel: boolean) => {
+	if (hasCancel) {
+		return (
+			<button class="btn btn-squared btn-red --cancel" type="button" app-action="click:app-form#goBack">
+				Cancel
+			</button>
+		);
+	}
+	return null;
+};
+
+export default (props): TemplateResult => {
+	const { renderInput, customRender, error, isValid, hasCancel } = props;
+
+	return (
+		<div class="app-form">
+			<form
+				app-action="submit:app-form#onSubmit"
+				data-target="app-form.formElement"
+				autocomplete="on"
+				method="POST"
+				action="javascript:void(0)"
+			>
+				{renderInput ? (
+					customRender()
+				) : (
+					<Fragment>
+						<slot data-target="app-form.innerSlot"></slot> {renderError(error)}
+					</Fragment>
+				)}
+				<div class="form-buttons">
+					<div class="button-content">
+						{renderSubmit(isValid)}
+						{renderCancel(isTrue(hasCancel))}
+					</div>
+				</div>
+			</form>
+		</div>
+	);
+};

src/components/wallet-header/WalletHeaderElementTemplate.ts

@@ -3,7 +3,7 @@ import { html, nothing, TemplateResult } from 'core/utils';
 export default (props): TemplateResult => {
 	const { currentBalance, currency, lastMonth, nextMonth, loader, initial } = props;
 
-	const renderItem = (header, balance, currency) => html`<div class="header-item">
+	const renderItem = (header, balance, currency) => html` <div class="header-item">
 		<div class="--header">${header}</div>
 		<div class="--content">
 			<span class="--balance ${balance > 0 ? '--positive' : '--negative'}"

src/core/utils/index.ts

@@ -1,4 +1,5 @@
 export * from './library';
+export * as Library from './library';
 export * from './templating';
 
 export * from './directives/until';

src/core/utils/library.ts

@@ -4,6 +4,52 @@ import { autoShadowRoot } from '@github/catalyst/lib/auto-shadow-root';
 import { defineObservedAttributes, initializeAttrs } from '@github/catalyst/lib/attr';
 
 import { CustomElement } from '@github/catalyst/lib/custom-element';
+import { html } from 'core/utils';
+
+function renderChildren(children) {
+	let _html = '';
+	for (const child of children) {
+		if (!child) break;
+		if (typeof child === 'string') {
+			_html += child;
+		} else {
+			_html += createElement(...child);
+		}
+	}
+	return _html;
+}
+
+const htmlTagReg = /<\/?[a-z][\s\S]*>/i;
+
+function processElement(tag?, attributes?, ...children) {
+	console.log(tag, attributes, children);
+	const isHtmlTag = htmlTagReg.test(tag);
+	if (isHtmlTag) {
+		console.log('tag1', [tag]);
+		return tag;
+	}
+	if (!tag) {
+		console.log('tag2', [tag]);
+		return renderChildren(children);
+	}
+
+	let _html = '<';
+	_html += tag;
+	for (const [key, value] of Object.entries(attributes || {})) {
+		_html += ` ${key}="${value}"`;
+	}
+	_html += '>';
+	_html += renderChildren(children);
+	_html += `</${tag}>`;
+	console.log('tag3', [_html]);
+	return _html;
+}
+
+function createElement(...args) {
+	return processElement(...args);
+}
+
+const Fragment = null;
 
 function controller(customElement: CustomElement | string): void | any {
 	if (typeof customElement == 'string') {
@@ -41,4 +87,4 @@ function controller(customElement: CustomElement | string): void | any {
 	}
 }
 
-export { attr, controller, target, targets };
+export { attr, controller, target, targets, createElement, Fragment };

src/pages/history-page/HistoryPageElementTemplate.ts

@@ -1,12 +0,0 @@
-import { html, nothing, TemplateResult } from 'core/utils';
-
-export default (props): TemplateResult => {
-	return html`<div>
-		<div class="wallet-buttons">
-			<button class="btn btn-squared btn-primary" app-action="click:history-page#transactionCheck">
-				Check Transactions
-			</button>
-		</div>
-		<app-pagination data-target="history-page.pagination"></app-pagination>
-	</div>`;
-};

src/pages/history-page/HistoryPageElementTemplate.tsx

@@ -0,0 +1,17 @@
+/** @jsx createElement */
+/** @jsx.Frag Fragment */
+
+import { TemplateResult, createElement } from 'core/utils';
+
+export default (props): TemplateResult => {
+	return (
+		<div>
+			<div class="wallet-buttons">
+				<button class="btn btn-squared btn-primary" app-action="click:history-page#transactionCheck">
+					Check Transactions
+				</button>
+			</div>
+			<app-pagination data-target="history-page.pagination"></app-pagination>
+		</div>
+	);
+};

src/pages/login-page/LoginFormTemplate.ts

@@ -1,25 +0,0 @@
-import { html, TemplateResult } from 'core/utils';
-
-export default (): TemplateResult => html` <input-field
-		data-type="email"
-		data-name="email"
-		data-label="E-mail"
-		data-targets="login-page.inputs"
-		data-rules="required|is_email"
-	></input-field>
-	<input-field
-		data-type="password"
-		data-name="password"
-		data-label="Password"
-		data-targets="login-page.inputs"
-		data-rules="required"
-	>
-	</input-field>
-	<input-field
-		data-type="checkbox"
-		data-name="rememberMe"
-		data-label="Remember me"
-		data-targets="login-page.inputs"
-		data-rules=""
-	>
-	</input-field>`;

src/pages/login-page/LoginFormTemplate.tsx

@@ -0,0 +1,30 @@
+/** @jsx createElement */
+/** @jsx.Frag Fragment */
+
+import { TemplateResult, createElement, Fragment } from 'core/utils';
+
+export default (): TemplateResult => (
+	<Fragment>
+		<input-field
+			data-type="email"
+			data-name="email"
+			data-label="E-mail"
+			data-targets="login-page.inputs"
+			data-rules="required|is_email"
+		></input-field>
+		<input-field
+			data-type="password"
+			data-name="password"
+			data-label="Password"
+			data-targets="login-page.inputs"
+			data-rules="required"
+		></input-field>
+		<input-field
+			data-type="checkbox"
+			data-name="rememberMe"
+			data-label="Remember me"
+			data-targets="login-page.inputs"
+			data-rules=""
+		></input-field>
+	</Fragment>
+);

src/pages/login-page/LoginPageElementTemplate.ts

@@ -1,13 +0,0 @@
-import { html, TemplateResult } from 'core/utils';
-
-export default (): TemplateResult => html`
-	<app-form
-		data-custom="login-page#onSubmit"
-		data-target="login-page.appForm"
-		data-render-input="login-page#renderForms"
-	>
-	</app-form>
-	<div>
-		<app-link data-to="/register" data-title="Create new account"></app-link>
-	</div>
-`;

src/pages/login-page/LoginPageElementTemplate.tsx

@@ -0,0 +1,27 @@
+/** @jsx createElement */
+/** @jsx.Frag Fragment */
+
+import { TemplateResult, createElement, Fragment } from 'core/utils';
+
+const Form = (
+	<app-form
+		data-custom="login-page#onSubmit"
+		data-target="login-page.appForm"
+		data-render-input="login-page#renderForms"
+	></app-form>
+);
+
+const RegisterLink = (
+	<div>
+		<app-link data-to="/register" data-title="Create new account"></app-link>
+	</div>
+);
+
+export default (): TemplateResult => {
+	return (
+		<Fragment>
+			<Form />
+			<RegisterLink />
+		</Fragment>
+	);
+};