From 2048c6c136c7c09348560e6c716d129f842defe3 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Thu, 30 Jun 2022 04:46:40 +0900 Subject: [PATCH 1/3] bump coli jsx builder --- externals/coli | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/externals/coli b/externals/coli index b736111c..4d6db9ef 160000 --- a/externals/coli +++ b/externals/coli @@ -1 +1 @@ -Subproject commit b736111cd7caeb419f9dd6c4dae63add68854f46 +Subproject commit 4d6db9efd29783e03836f1a86e4832f32bd982f0 From c77a3a778ff8dc27ebd9eda123205476c704af74 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Thu, 30 Jun 2022 04:47:10 +0900 Subject: [PATCH 2/3] update vanilla html builder with coli --- .../html-css-id-module-builder.ts | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/packages/builder-web-vanilla/html-css-id-widget/html-css-id-module-builder.ts b/packages/builder-web-vanilla/html-css-id-widget/html-css-id-module-builder.ts index 8917c344..eabab484 100644 --- a/packages/builder-web-vanilla/html-css-id-widget/html-css-id-module-builder.ts +++ b/packages/builder-web-vanilla/html-css-id-widget/html-css-id-module-builder.ts @@ -2,7 +2,7 @@ import { NoStyleJSXElementConfig, StyledComponentJSXElementConfig, } from "@web-builder/styled"; -import { JSXChildLike } from "coli"; +import { JSX, JSXChildLike, Snippet } from "coli"; import { StylesRepository } from "@web-builder/core/builders"; import { create_duplication_reduction_map } from "@web-builder/styled"; import { buildCSSStyleData, CSSProperties } from "@coli.codes/css"; @@ -174,13 +174,9 @@ export class HtmlIdCssModuleBuilder { * @returns merged final html file src */ render(): string { - const strfied_body = stringfy(this.partBody(), { - language: "jsx", - }); - const final = html_render({ css: this.partStyles(), - body: strfied_body, + body: this.partBody(), }); return final; @@ -222,20 +218,24 @@ function injectIdToJsx(jsx: JSXElementLike, id: string) { } } -const html_render = ({ css, body }: { css: string; body: string }) => { +const html_render = ({ css, body }: { css: string; body: JSXChildLike }) => { const indenter = (s: string, tabs: number = 0) => s.replace(/\n/g, "\n" + "\t".repeat(tabs)); - return ` - - - - - -${indenter(body, 2)} - -`; + + const html = JSX.html({ + children: [ + JSX.head( + // style + JSX.style(Snippet.fromStatic(indenter(css, 3)) as any) + ), + // body + JSX.body(body), + ], + }); + + return stringfy(html.make(), { + language: "jsx", // use jsx for html also. + }); }; /** From 31c1b0fdbcabb19bfb4bbf88954e287ed2c307d8 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Thu, 30 Jun 2022 05:15:44 +0900 Subject: [PATCH 3/3] init svelte config & package --- .../builder-config/framework-svelte/index.ts | 0 .../framework-svelte/svelte-config-styling.ts | 62 +++++++++++++++++++ packages/builder-web-svelte/package.json | 4 ++ 3 files changed, 66 insertions(+) create mode 100644 packages/builder-config/framework-svelte/index.ts create mode 100644 packages/builder-config/framework-svelte/svelte-config-styling.ts create mode 100644 packages/builder-web-svelte/package.json diff --git a/packages/builder-config/framework-svelte/index.ts b/packages/builder-config/framework-svelte/index.ts new file mode 100644 index 00000000..e69de29b diff --git a/packages/builder-config/framework-svelte/svelte-config-styling.ts b/packages/builder-config/framework-svelte/svelte-config-styling.ts new file mode 100644 index 00000000..34cb301b --- /dev/null +++ b/packages/builder-config/framework-svelte/svelte-config-styling.ts @@ -0,0 +1,62 @@ +/// +/// this configuration is work-in-progress. +/// + +export type SvelteStylingOption = + | SvelteStyleFragment + | SvelteInlineCssOption + | SvelteCssInJsOption; + +type SvelteInlineCssOption = + | SvelteInlineCssWithHtmlStandard + | SvelteInlineCssWithStyleDirective; + +type SvelteCssInJsOption = SvelteEmotionCSS; + +interface SvelteEmotionCSS {} + +/** + * inline css styling in svelte with html standard way. + * + * e.g. 👇 + * ```html + *

+ * ``` + */ +export interface SvelteInlineCssWithHtmlStandard { + type: "inline-css-standard"; +} + +/** + * + * e.g. 👇 + * ```html + *

+ * ``` + * + * Learn more - [svelte style directive RFC](https://github.com/sveltejs/rfcs/blob/master/text/0008-style-directives.md) + */ +export interface SvelteInlineCssWithStyleDirective { + type: "inline-css-with-style-directive"; +} + +/** + * styling using standard scoped css under + * ``` + */ +// TODO: give a better clear name +export interface SvelteStyleFragment {} diff --git a/packages/builder-web-svelte/package.json b/packages/builder-web-svelte/package.json new file mode 100644 index 00000000..721febaa --- /dev/null +++ b/packages/builder-web-svelte/package.json @@ -0,0 +1,4 @@ +{ + "name": "@web-builder/svelte", + "version": "0.0.0" +} \ No newline at end of file