diff --git a/editor/components/app-runner/react-app-runner.tsx b/editor/components/app-runner/react-app-runner.tsx index dac188e5..c0d31020 100644 --- a/editor/components/app-runner/react-app-runner.tsx +++ b/editor/components/app-runner/react-app-runner.tsx @@ -1,3 +1,4 @@ +import { k } from "@designto/react"; import React from "react"; import { CodeSandBoxView } from "./code-sandbox-runner"; @@ -13,80 +14,27 @@ export function ReactAppRunner(props: { sandbox={{ files: { "App.tsx": { - content: props.source, + content: k.create_react_app_typescript_starter.app_tsx( + props.source + ), isBinary: false, }, "index.tsx": { - content: ` -import React from "react"; -import { render } from "react-dom"; - -import ${props.componentName} from "./App"; - -const rootElement = document.getElementById("root"); -render(<${props.componentName} />, rootElement); -`, + content: k.create_react_app_typescript_starter.index_tsx( + props.componentName + ), isBinary: false, }, "tsconfig.json": { - content: ` -{ - "include": [ - "./src/**/*" - ], - "compilerOptions": { - "strict": true, - "esModuleInterop": true, - "lib": [ - "dom", - "es2015" - ], - "jsx": "react-jsx" - } -}`, + content: k.create_react_app_typescript_starter.tsconfig_json, isBinary: false, }, "package.json": { - content: ` -{ - "name": "react-typescript", - "version": "1.0.0", - "description": "React and TypeScript example starter project", - "keywords": [ - "typescript", - "react", - "starter" - ], - "main": "src/index.tsx", - "dependencies": { - "react": "17.0.2", - "react-dom": "17.0.2", - "react-scripts": "4.0.0", - "@emotion/react": "^11.1.5", - "@emotion/styled": "^11.1.5" - }, - "devDependencies": { - "@types/react": "17.0.0", - "@types/react-dom": "17.0.0", - "typescript": "4.1.3" - }, - "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test --env=jsdom", - "eject": "react-scripts eject" - }, - "browserslist": [ - ">0.2%", - "not dead", - "not ie <= 11", - "not op_mini all" - ] -}`, + content: k.create_react_app_typescript_starter.package_json, isBinary: false, }, }, - template: "create-react-app-typescript", + template: k.create_react_app_typescript_starter.template as any, }} width={props.width} height={props.height} diff --git a/editor/components/code-editor/code-editor.tsx b/editor/components/code-editor/code-editor.tsx index 06a1f026..cfe326c7 100644 --- a/editor/components/code-editor/code-editor.tsx +++ b/editor/components/code-editor/code-editor.tsx @@ -1,40 +1,53 @@ -//// dynamic code editor. supports codemirror & monaco -import React from "react"; -import CodeMirror from "./code-mirror"; -import { MonacoEditor } from "./monaco"; +import React, { useState } from "react"; +import { MonacoEditor, MonacoEditorProps as MonacoEditorProps } from "./monaco"; +import { Tabs, Tab } from "@material-ui/core"; -interface DynamicEdotorProps { - host?: _Host; +export interface CodeEditorProps + extends Omit {} +export interface IFile { + name: string; + language: string; + raw: string; } -type _Host = "codemirror" | "monaco" | "auto"; -// uses monaco by default. when set auto or host not provided. -const fallbackAutoHost = "monaco"; +export type Files = { [name: string]: IFile }; -export function CodeEditor(props: DynamicEdotorProps) { - const _editorname = getTargetEditorName(props.host); +export function CodeEditor({ + files, + ...editor_props +}: { + files: Files; +} & CodeEditorProps) { + const keys = Object.keys(files); + const [filekey, setFilekey] = useState(keys[0]); + const getfile = (key: string) => files[key]; + const handleChange = (event, newValue) => { + setFilekey(newValue); + }; - switch (_editorname) { - case "codemirror": - return ; - case "monaco": - return ; - } -} - -function getTargetEditorName(host?: _Host): "codemirror" | "monaco" { - if (!host) { - return fallbackAutoHost; - } - - switch (host) { - case "auto": - return fallbackAutoHost; - case "codemirror": - return "codemirror"; - case "monaco": - return "monaco"; - } + const file = getfile(filekey); - throw `invalid host option provided - "${host}"`; + return ( + <> + {keys.length >= 2 && ( + + {Object.keys(files).map((name) => { + return ; + })} + + )} + + + ); } diff --git a/editor/components/code-editor/monaco.tsx b/editor/components/code-editor/monaco.tsx index 53afb1f5..2e176445 100644 --- a/editor/components/code-editor/monaco.tsx +++ b/editor/components/code-editor/monaco.tsx @@ -1,9 +1,9 @@ import React, { useEffect } from "react"; -import Editor, { useMonaco } from "@monaco-editor/react"; +import Editor, { useMonaco, Monaco } from "@monaco-editor/react"; import * as monaco from "monaco-editor/esm/vs/editor/editor.api"; import _react_type_def_txt from "./react.d.ts.txt"; -interface EditorProps { +export interface MonacoEditorProps { defaultValue?: string; defaultLanguage?: string; width?: number | string; @@ -11,32 +11,12 @@ interface EditorProps { options?: monaco.editor.IStandaloneEditorConstructionOptions; } -export function MonacoEditor(props: EditorProps) { - const monaco = useMonaco(); +export function MonacoEditor(props: MonacoEditorProps) { + const monaco: Monaco = useMonaco(); useEffect(() => { - // adding jsx support - https://github.com/microsoft/monaco-editor/issues/264 if (monaco) { - monaco.languages.typescript.typescriptDefaults.setCompilerOptions({ - target: monaco.languages.typescript.ScriptTarget.Latest, - allowNonTsExtensions: true, - moduleResolution: - monaco.languages.typescript.ModuleResolutionKind.NodeJs, - module: monaco.languages.typescript.ModuleKind.CommonJS, - noEmit: true, - esModuleInterop: true, - jsx: monaco.languages.typescript.JsxEmit.React, - reactNamespace: "React", - allowJs: true, - }); - - monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({ - noSemanticValidation: false, - noSyntaxValidation: false, - }); - - monaco.languages.typescript.typescriptDefaults.addExtraLib( - _react_type_def_txt - ); + setup_react_support(monaco); + // monaco.mo } }, [monaco]); @@ -49,7 +29,7 @@ export function MonacoEditor(props: EditorProps) { } defaultValue={props.defaultValue ?? "// no content"} theme="vs-dark" - options={props.options} + options={{ ...props.options }} /> ); } @@ -65,4 +45,28 @@ const pollyfill_language = (lang: string) => { } }; +function setup_react_support(monaco: Monaco) { + // adding jsx support - https://github.com/microsoft/monaco-editor/issues/264 + monaco.languages.typescript.typescriptDefaults.setCompilerOptions({ + target: monaco.languages.typescript.ScriptTarget.Latest, + allowNonTsExtensions: true, + moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs, + module: monaco.languages.typescript.ModuleKind.CommonJS, + noEmit: true, + esModuleInterop: true, + jsx: monaco.languages.typescript.JsxEmit.React, + reactNamespace: "React", + allowJs: true, + }); + + monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({ + noSemanticValidation: false, + noSyntaxValidation: false, + }); + + monaco.languages.typescript.typescriptDefaults.addExtraLib( + _react_type_def_txt + ); +} + export { useMonaco } from "@monaco-editor/react"; diff --git a/editor/package.json b/editor/package.json index d82a7d85..ee8e36bc 100644 --- a/editor/package.json +++ b/editor/package.json @@ -15,9 +15,9 @@ "@emotion/core": "^11.0.0", "@emotion/react": "^11.1.5", "@emotion/styled": "^11.1.5", - "@material-ui/core": "^4.11.4", + "@material-ui/core": "^4.12.3", "@material-ui/icons": "^4.11.2", - "@material-ui/lab": "^4.0.0-alpha.58", + "@material-ui/lab": "^4.0.0-alpha.60", "@monaco-editor/react": "^4.1.3", "@reflect-blocks/figma-embed": "^0.0.5", "@reflect-ui/editor-ui": "0.0.1", diff --git a/editor/pages/_development/code-editor/index.tsx b/editor/pages/_development/code-editor/index.tsx new file mode 100644 index 00000000..354e5cbd --- /dev/null +++ b/editor/pages/_development/code-editor/index.tsx @@ -0,0 +1,19 @@ +import React from "react"; +import { CodeEditor, Files } from "../../../components/code-editor"; + +export default function CodeEditorDevPage() { + const files: Files = { + "index.ts": { + name: "index.ts", + language: "typescript", + raw: `export * from "./components"`, + }, + "components/index.ts": { + name: "index.ts", + language: "typescript", + raw: `export * from "./app-bar"`, + }, + }; + + return ; +} diff --git a/editor/pages/figma/to-flutter.tsx b/editor/pages/figma/to-flutter.tsx index 175039c1..6a0fddb9 100644 --- a/editor/pages/figma/to-flutter.tsx +++ b/editor/pages/figma/to-flutter.tsx @@ -17,7 +17,7 @@ import { } from "../../layout/panel"; import { PreviewAndRunPanel } from "../../components/preview-and-run"; import { useDesign } from "../../query-hooks"; -import { MonacoEditor } from "../../components/code-editor"; +import { CodeEditor, MonacoEditor } from "../../components/code-editor"; import LoadingLayout from "../../layout/loading-overlay"; export default function FigmaToFlutterPage() { @@ -81,18 +81,21 @@ export default function FigmaToFlutterPage() { - diff --git a/editor/pages/figma/to-react.tsx b/editor/pages/figma/to-react.tsx index 0d6676c2..edcad2b9 100644 --- a/editor/pages/figma/to-react.tsx +++ b/editor/pages/figma/to-react.tsx @@ -9,7 +9,7 @@ import { } from "../../layout/panel"; import { WorkspaceBottomPanelDockLayout } from "../../layout/panel/workspace-bottom-panel-dock-layout"; import { WidgetTree } from "../../components/visualization/json-visualization/json-tree"; -import { MonacoEditor } from "../../components/code-editor"; +import { CodeEditor } from "../../components/code-editor"; import { tokenize } from "@designto/token"; import * as react from "@designto/react"; import { mapGrandchildren } from "@design-sdk/core/utils"; @@ -78,17 +78,21 @@ export default function FigmaToReactDemoPage() { - diff --git a/editor/pages/to-code/index.tsx b/editor/pages/to-code/index.tsx index 25e9b1e2..7f59a92c 100644 --- a/editor/pages/to-code/index.tsx +++ b/editor/pages/to-code/index.tsx @@ -9,7 +9,7 @@ import { WorkspaceContentPanelGridLayout, } from "../../layout/panel"; import { WorkspaceBottomPanelDockLayout } from "../../layout/panel/workspace-bottom-panel-dock-layout"; -import { MonacoEditor } from "../../components/code-editor"; +import { CodeEditor } from "../../components/code-editor"; import { react_presets, flutter_presets, @@ -29,8 +29,10 @@ export default function DesignToCodeUniversalPage() { const router = useRouter(); const design = useDesign(); const [result, setResult] = useState(); + const [preview, setPreview] = useState(); const framework_config = get_framework_config_from_query(router.query); + const preview_runner_framework = get_preview_runner_framework(router.query); useEffect(() => { if (design) { @@ -57,11 +59,28 @@ export default function DesignToCodeUniversalPage() { asset_config: { asset_repository: MainImageRepository.instance }, }).then((result) => { setResult(result); + if (framework_config.framework == preview_runner_framework.framework) { + setPreview(result); + } }); + // ----- for preview ----- + if (framework_config.framework !== preview_runner_framework.framework) { + designToCode({ + input: { + id: id, + name: name, + design: reflect, + }, + framework: preview_runner_framework, + asset_config: { asset_repository: MainImageRepository.instance }, + }).then((result) => { + setPreview(result); + }); + } } }, [design]); - if (!result) { + if (!result || !preview) { return ; } @@ -85,8 +104,8 @@ export default function DesignToCodeUniversalPage() { - @@ -141,6 +163,10 @@ export default function DesignToCodeUniversalPage() { function get_framework_config_from_query(query: ParsedUrlQuery) { const framework = query.framework as string; + return get_framework_config(framework); +} + +function get_framework_config(framework: string) { switch (framework) { case "react": case "react_default": @@ -161,6 +187,13 @@ function get_framework_config_from_query(query: ParsedUrlQuery) { } } +function get_preview_runner_framework(query: ParsedUrlQuery) { + const preview = query.preview as string; + return get_framework_config( + preview || get_framework_config_from_query(query).framework + ); +} + function get_runner_platform(config: FrameworkConfig) { switch (config.framework) { case "react": diff --git a/packages/builder-config-preset/index.ts b/packages/builder-config-preset/index.ts index 471fa3b5..e451da49 100644 --- a/packages/builder-config-preset/index.ts +++ b/packages/builder-config-preset/index.ts @@ -5,22 +5,38 @@ export const react_presets = { react_default: { framework: Framework.react, language: Language.tsx, - styling: "styled-components", + styling: { + type: "styled-components", + module: "@emotion/styled", + }, }, react_with_styled_components: { framework: Framework.react, language: Language.tsx, - styling: "styled-components", + styling: { + type: "styled-components", + module: "styled-components", + }, + }, + react_with_emotion_styled: { + framework: Framework.react, + language: Language.tsx, + styling: { + type: "styled-components", + module: "@emotion/styled", + }, }, react_with_css_in_jsx: { framework: Framework.react, language: Language.tsx, - styling: "css-in-jsx", + styling: { + type: "css-in-jsx", + }, }, react_with_css: { framework: Framework.react, language: Language.tsx, - styling: "css", + styling: { type: "css" }, }, }; @@ -63,8 +79,32 @@ export const all_preset_options_map__prod = { // react_with_css // NOT ON PRODUCTION }; -export const react_styles: react.ReactStylingStrategy[] = [ - "styled-components", - "css-in-jsx", - "css", -]; +export const react_styles: { + [alias in react.ReactStylingStrategy["type"]]: react.ReactStylingStrategy[]; +} = { + "styled-components": [ + { + type: "styled-components", + module: "@emotion/styled", + }, + { + type: "styled-components", + module: "styled-components", + }, + ], + "css-in-jsx": [ + { + type: "css-in-jsx", + }, + ], + css: [ + { + type: "css", + lang: "css", + }, + { + type: "css", + lang: "scss", + }, + ], +}; diff --git a/packages/builder-config/configure/framework-config.ts b/packages/builder-config/configure/framework-config.ts index c5d3c335..90ad755f 100644 --- a/packages/builder-config/configure/framework-config.ts +++ b/packages/builder-config/configure/framework-config.ts @@ -1,16 +1,12 @@ import { Language } from "@grida/builder-platform-types"; -import { ReactStylingStrategy } from "../framework-react"; +import type { ReactFrameworkConfig } from "../framework-react"; export type FrameworkConfig = | ReactFrameworkConfig | FlutterFrameworkConfig | VanillaFrameworkConfig; -export interface ReactFrameworkConfig { - framework: "react"; - language: Language.jsx | Language.tsx; - styling: ReactStylingStrategy; -} +export type { ReactFrameworkConfig }; export interface FlutterFrameworkConfig { framework: "flutter"; diff --git a/packages/builder-config/framework-react/index.ts b/packages/builder-config/framework-react/index.ts index fd72a15f..fab21abd 100644 --- a/packages/builder-config/framework-react/index.ts +++ b/packages/builder-config/framework-react/index.ts @@ -1,5 +1,6 @@ -import { ComponentOutput } from "../output"; - -export interface ReactComponentOutput extends ComponentOutput {} - -export type ReactStylingStrategy = "css" | "styled-components" | "css-in-jsx"; +export * from "./react-config"; +export * from "./react-config-component-syntax"; +export * from "./react-config-exporting-component"; +export * from "./react-config-functional-component-declaration"; +export * from "./react-config-styling"; +export * from "./react-output"; diff --git a/packages/builder-config/framework-react/react-config-component-syntax.ts b/packages/builder-config/framework-react/react-config-component-syntax.ts new file mode 100644 index 00000000..a5f1a6e0 --- /dev/null +++ b/packages/builder-config/framework-react/react-config-component-syntax.ts @@ -0,0 +1,8 @@ +export type ReactComponentSyntax = + | VariableDeclarationSyntax + | FunctionDeclarationSyntax + | ClassDeclarationSyntax; + +type FunctionDeclarationSyntax = "function"; +type ClassDeclarationSyntax = "class"; +type VariableDeclarationSyntax = "const" | "let" | "var"; diff --git a/packages/builder-config/framework-react/react-config-exporting-component.ts b/packages/builder-config/framework-react/react-config-exporting-component.ts new file mode 100644 index 00000000..785bc964 --- /dev/null +++ b/packages/builder-config/framework-react/react-config-exporting-component.ts @@ -0,0 +1,91 @@ +export type ReactComponentExportingCofnig = + | ReactComponentExportingConfig_ExportDefaultAnonymousFunctionalComponent + | ReactComponentExportingConfig_ExportNamedFunction + | ReactComponentExportingConfig_ExportDefaultAnonymousClassComponent + | ReactComponentExportingConfig_ExportNamedClassComponent; + +export type ReactFunctionalComponentDeclarationSyntaxChoice = + | "function" + | "inlinefunction"; + +export type ReactComponentExportDeclarationSyntaxChoice = + | "export" + | "export-default"; + +/** + * ```tsx + * export default function () { ... } + * ``` + */ +export interface ReactComponentExportingConfig_ExportDefaultAnonymousFunctionalComponent { + type: "export-default-anonymous-functional-component"; + exporting_position: "with-declaration"; + declaration_syntax_choice: ReactFunctionalComponentDeclarationSyntaxChoice; + export_declaration_syntax_choice: "export-default"; +} + +/** + * ```tsx + * export function () { ... } +@ + * // or + * export default function () { ... } +@ + * ``` + */ +export interface ReactComponentExportingConfig_ExportNamedFunction { + type: "export-named-functional-component"; + exporting_position: react_component_symantic_export_token_location; + declaration_syntax_choice: ReactFunctionalComponentDeclarationSyntaxChoice; + export_declaration_syntax_choice: ReactComponentExportDeclarationSyntaxChoice; +} + +/** + * ```tsx + * export default class { ... } + * ``` + */ +export interface ReactComponentExportingConfig_ExportDefaultAnonymousClassComponent { + type: "export-anonymous-class-component"; + exporting_position: "with-declaration"; + export_declaration_syntax_choice: "export-default"; +} + +/** + * ```tsx + * export class Component {} +@ + * // or + * export default class Component {} +@ + * ``` + */ +export interface ReactComponentExportingConfig_ExportNamedClassComponent { + type: "export-named-class-component"; + exporting_position: react_component_symantic_export_token_location; + export_declaration_syntax_choice: ReactComponentExportDeclarationSyntaxChoice; +} + +/** + * symantic location that export token can be located + * + * ```ts + * // `with-declaration` + * export function A () {} + * var _other_blocks; + * ... + * + * // `after-declaration` + * function A () {} + * export { A } + * var _other_blocks; + * + * // `end-of-file` + * function A () {} + * var _other_blocks; + * export { A } + * ``` + */ +export type react_component_symantic_export_token_location = + // export function A ... + | "with-declaration" + // function A ... export { A } + | "after-declaration" + // function A ... ... export { A } + | "end-of-file"; diff --git a/packages/builder-config/framework-react/react-config-functional-component-declaration.ts b/packages/builder-config/framework-react/react-config-functional-component-declaration.ts new file mode 100644 index 00000000..37af0426 --- /dev/null +++ b/packages/builder-config/framework-react/react-config-functional-component-declaration.ts @@ -0,0 +1,10 @@ +export type ReactFunctionalComponentDeclarationConfig = ReactFunctionalComponentDeclarationStyle; + +interface ReactFunctionalComponentDeclarationStyle { + // props: {} vs {} : {} + props_parameter_style: UnwrappedPropsCodeStyle; +} + +interface UnwrappedPropsCodeStyle { + style: "unwrapped-props"; +} diff --git a/packages/builder-config/framework-react/react-config-styling.ts b/packages/builder-config/framework-react/react-config-styling.ts new file mode 100644 index 00000000..3a789000 --- /dev/null +++ b/packages/builder-config/framework-react/react-config-styling.ts @@ -0,0 +1,40 @@ +export type ReactStylingStrategy = + | CssInJsxConfig + | CssStylingConfig + | ReactStyledComponentsConfig; + +interface CssInJsxConfig { + type: "css-in-jsx"; +} + +type CssStylingConfig = VanillaCssStylingConfig | ScssStylingConfig; + +interface VanillaCssStylingConfig { + type: "css"; + lang: "css"; +} + +interface ScssStylingConfig { + type: "css"; + lang: "scss"; +} + +type ReactStyledComponentsConfig = + | ReactTheStyledComponentsConfig + | ReactEmotionStyledConfig; + +/** + * "The" styled-components config - https://styled-components.com/ + */ +interface ReactTheStyledComponentsConfig { + type: "styled-components"; + module: "styled-components"; +} + +/** + * @emotion/styled config - https://emotion.sh/ + */ +interface ReactEmotionStyledConfig { + type: "styled-components"; + module: "@emotion/styled"; +} diff --git a/packages/builder-config/framework-react/react-config.ts b/packages/builder-config/framework-react/react-config.ts new file mode 100644 index 00000000..959d9fb7 --- /dev/null +++ b/packages/builder-config/framework-react/react-config.ts @@ -0,0 +1,16 @@ +import { Language } from "@grida/builder-platform-types"; +import type { ReactComponentExportingCofnig } from "./react-config-exporting-component"; +import type { ReactFunctionalComponentDeclarationConfig } from "./react-config-functional-component-declaration"; +import type { ReactStylingStrategy } from "./react-config-styling"; + +export interface ReactFrameworkConfig { + framework: "react"; + language: Language.jsx | Language.tsx; + // TODO: rename to css_styling + styling: ReactStylingStrategy; + component_declaration_style: { + exporting_style: ReactComponentExportingCofnig; + // not supported yet + declaration_style?: ReactFunctionalComponentDeclarationConfig; + }; +} diff --git a/packages/builder-config/framework-react/react-output.ts b/packages/builder-config/framework-react/react-output.ts new file mode 100644 index 00000000..0969ee74 --- /dev/null +++ b/packages/builder-config/framework-react/react-output.ts @@ -0,0 +1,3 @@ +import { ComponentOutput } from "../output"; + +export interface ReactComponentOutput extends ComponentOutput {} diff --git a/packages/builder-config/index.ts b/packages/builder-config/index.ts index 6984f502..0bf284f7 100644 --- a/packages/builder-config/index.ts +++ b/packages/builder-config/index.ts @@ -3,3 +3,4 @@ export * as output from "./output"; export * as config from "./configure"; // configure export * from "./configure"; // configure export * from "./framework"; +export * as k from "./k"; diff --git a/packages/builder-config/k/index.ts b/packages/builder-config/k/index.ts new file mode 100644 index 00000000..76327f34 --- /dev/null +++ b/packages/builder-config/k/index.ts @@ -0,0 +1,12 @@ +/** + * https://www.npmjs.com/@made-with-grida ~ + * + * e.g. + * ```json + * { + * "name": "@made-with-grida/-", + * "version": "" + * } + * ``` + */ +export const made_with_grida_npm_namespace = "@made-with-grida"; diff --git a/packages/builder-config/output/index.ts b/packages/builder-config/output/index.ts index c5b774b0..aaf683a5 100644 --- a/packages/builder-config/output/index.ts +++ b/packages/builder-config/output/index.ts @@ -1,3 +1,4 @@ export * from "./code-output"; export * from "./component-output"; export * from "./screen-output"; +export * from "./make-output"; diff --git a/packages/builder-config/output/make-output/README.md b/packages/builder-config/output/make-output/README.md new file mode 100644 index 00000000..934b197f --- /dev/null +++ b/packages/builder-config/output/make-output/README.md @@ -0,0 +1 @@ +# Output make utilities. end user won't need to access this module diff --git a/packages/builder-config/output/make-output/index.ts b/packages/builder-config/output/make-output/index.ts new file mode 100644 index 00000000..e21e7cc9 --- /dev/null +++ b/packages/builder-config/output/make-output/index.ts @@ -0,0 +1,5 @@ +import { make_project_part_output } from "./project-part-snapshot-build-default-params"; + +export const make = { + project_part_output: make_project_part_output, +}; diff --git a/packages/builder-config/output/make-output/project-part-snapshot-build-default-params.ts b/packages/builder-config/output/make-output/project-part-snapshot-build-default-params.ts new file mode 100644 index 00000000..e31d9062 --- /dev/null +++ b/packages/builder-config/output/make-output/project-part-snapshot-build-default-params.ts @@ -0,0 +1,36 @@ +import type { ProjectPart } from "../output-part-project"; +import type { File } from "../output-file"; +import type { Module } from "../output-module"; +import * as k from "../../k"; + +export function make_project_part_output({ + name, + version = "0.0.0", + main, + files, + modules, + os = ["*"], + engines = {}, +}: { + name: string; + version?: string; + main: string; + files: File[]; + modules: Module[]; + os?: string[]; + engines?: { + [key: string]: string; + }; +}): ProjectPart { + return { + _type: "part-project", + engines: engines, + os: os, + private: true, + name: `${k.made_with_grida_npm_namespace}/${name}`, + version: version, + modules: modules, + files: files, + main: main, + }; +} diff --git a/packages/builder-config/output/output-component/README.md b/packages/builder-config/output/output-component/README.md new file mode 100644 index 00000000..0bcae9f6 --- /dev/null +++ b/packages/builder-config/output/output-component/README.md @@ -0,0 +1 @@ +# Component output diff --git a/packages/builder-config/output/output-file/README.md b/packages/builder-config/output/output-file/README.md new file mode 100644 index 00000000..7ac8882e --- /dev/null +++ b/packages/builder-config/output/output-file/README.md @@ -0,0 +1 @@ +# File diff --git a/packages/builder-config/output/output-file/index.ts b/packages/builder-config/output/output-file/index.ts new file mode 100644 index 00000000..f80886f6 --- /dev/null +++ b/packages/builder-config/output/output-file/index.ts @@ -0,0 +1,54 @@ +/** + * the genral file output definition + */ +export interface File { + /** + * name of the file with optional extension + * + * by "optional", it doesn't mean you can skip the extension while expecting the handler to automatically detect the extension + * + * it means you can skip the extension for files that does not require a extension. + * e.g. + * ``` + * LICENSE + * WATCHLISTS + * OWNERS + * DIR_METADATA + * ``` + * + * other wise, the extension is required. + * e.g. + * ``` + * index.html + * index.ts + * my-gf-selfie.jpg (null) + * .gn + * .vscode + * .github + * ``` + */ + name: string; + + /** + * mime type of the file + */ + readonly type: string; + + /** + * The absolute path to the file relative to root of the environment. + * + * - acceptable: `/path/to/file.ts` + * - unacceptable: `./path/to/file.ts` + */ + path: string; + + /** + * The contents of the file. binary is also acceptable. + */ + content: string; + + /** + * the size of the file + */ + size?: number; +} diff --git a/packages/builder-config/output/output-module/README.md b/packages/builder-config/output/output-module/README.md new file mode 100644 index 00000000..d2fe431c --- /dev/null +++ b/packages/builder-config/output/output-module/README.md @@ -0,0 +1,9 @@ +# Module outout (!RTFM!) + +definition: module here, is not a conventional module that we understand. +Module is simply a file, that has a export member and can be imported from other files. +we use the term "module" to sync the term with flag `--module` form `@code-features/flags` + +Module is a superset of file, a file with a programming language contained. + +General file on the other hand, can contain any dynamic contents such as images (.png), video (.mov), or document (.md) and so on.. diff --git a/packages/builder-config/output/output-module/index.ts b/packages/builder-config/output/output-module/index.ts new file mode 100644 index 00000000..382e6c6d --- /dev/null +++ b/packages/builder-config/output/output-module/index.ts @@ -0,0 +1,9 @@ +export interface Module extends File { + _type: "module"; + language: "ts" | "tsx" | "js" | "jsx" | "vue" | "dart" | "svelte"; + + /** + * list of exporting member identifiers + */ + exports: string[]; +} diff --git a/packages/builder-config/output/output-part-project/README.md b/packages/builder-config/output/output-part-project/README.md new file mode 100644 index 00000000..0dee083c --- /dev/null +++ b/packages/builder-config/output/output-part-project/README.md @@ -0,0 +1,3 @@ +# Project part output + +definition: A executable project, that can be executed as standalone, but not a complete user project. diff --git a/packages/builder-config/output/output-part-project/index.ts b/packages/builder-config/output/output-part-project/index.ts new file mode 100644 index 00000000..9d81f1c7 --- /dev/null +++ b/packages/builder-config/output/output-part-project/index.ts @@ -0,0 +1,66 @@ +import { File } from "../output-file"; +import type { Module } from "../output-module"; + +/** + * PartProject interface. + * + * + * _references_: the part project is inspired from [package.json manifest](https://docs.npmjs.com/cli/v7/configuring-npm/package-json), yet compatitable across all frameworks, os, envs. + */ +export interface ProjectPart { + _type: "part-project"; + + engines: { [key: string]: string }; + + os: string[]; + + private: boolean; + + /** + * name of the part project + */ + name: string; + + version: string; + + description?: string; + + /** + * authors + */ + authors?: string[]; + + homepage?: string; + + bugs?: string; + + license?: string; + + modules: Module[]; + + files: File[]; + + repository?: + | { + type: string; + url: string; + } + | string; + + dependencies?: { + [key: string]: string; + }; + + devDependencies?: { + [key: string]: string; + }; + + peerDependencies?: { + [key: string]: string; + }; + + /** + * the main entry point of the project (just like in package.json for example) + */ + main: string; +} diff --git a/packages/builder-web-nodejs/index.ts b/packages/builder-web-nodejs/index.ts index 68d10d3e..cce00394 100644 --- a/packages/builder-web-nodejs/index.ts +++ b/packages/builder-web-nodejs/index.ts @@ -1,6 +1,5 @@ // the name "package" is reserved. using "packages" with "s" instead. export * as packages from "./package"; -export * as templates from "./templates"; // no-repacking - already packed inside. export "standard_libraries" export * from "./stdlib"; diff --git a/packages/builder-web-nodejs/tsconfig.json b/packages/builder-web-nodejs/tsconfig.json deleted file mode 100644 index d9f337a4..00000000 --- a/packages/builder-web-nodejs/tsconfig.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "extends": "../tsconfig.json", - "compilerOptions": { - "esModuleInterop": true - } -} diff --git a/packages/builder-web-react/export/export-result/component.export-result.ts b/packages/builder-web-react/export-result/component.export-result.ts similarity index 100% rename from packages/builder-web-react/export/export-result/component.export-result.ts rename to packages/builder-web-react/export-result/component.export-result.ts diff --git a/packages/builder-web-react/export/export-result/index.ts b/packages/builder-web-react/export-result/index.ts similarity index 100% rename from packages/builder-web-react/export/export-result/index.ts rename to packages/builder-web-react/export-result/index.ts diff --git a/packages/builder-web-react/export/exportable/index.ts b/packages/builder-web-react/export/exportable/index.ts deleted file mode 100644 index 22fd40c4..00000000 --- a/packages/builder-web-react/export/exportable/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -/** - * coli configurable ecportable object. - * A snapshot object - */ -export class ReactComponentExportable { - constructor() {} -} diff --git a/packages/builder-web-react/export/index.ts b/packages/builder-web-react/export/index.ts deleted file mode 100644 index f4634beb..00000000 --- a/packages/builder-web-react/export/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./stringfy"; -export * from "./exportable"; diff --git a/packages/builder-web-react/export/stringfy/index.ts b/packages/builder-web-react/export/stringfy/index.ts deleted file mode 100644 index b850b194..00000000 --- a/packages/builder-web-react/export/stringfy/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./css-in-jsx"; -export * from "./styled-component"; diff --git a/packages/builder-web-react/index.ts b/packages/builder-web-react/index.ts index 803e698b..044c6b5b 100644 --- a/packages/builder-web-react/index.ts +++ b/packages/builder-web-react/index.ts @@ -1,3 +1,5 @@ +export * from "./react-styled-component-widget"; +export * from "./react-import-specifications"; +export * from "./react-project"; export * from "./widgets-native"; export * from "./widgets-reflect-react"; -export * from "./export"; diff --git a/packages/builder-web-react/react-component-exporting/index.ts b/packages/builder-web-react/react-component-exporting/index.ts new file mode 100644 index 00000000..549f2165 --- /dev/null +++ b/packages/builder-web-react/react-component-exporting/index.ts @@ -0,0 +1,35 @@ +import { SyntaxKind } from "@coli.codes/core-syntax-kind"; +import { + ExportAssignment, + FunctionDeclaration, + Identifier, + VariableDeclaration, + VariableStatement, +} from "coli"; + +export function add_export_keyword_modifier_to_declaration( + declaration: FunctionDeclaration | VariableDeclaration | VariableStatement +): FunctionDeclaration | VariableStatement { + if (declaration instanceof FunctionDeclaration) { + declaration.modifiers.export = SyntaxKind.ExportKeyword; + return declaration; + } + if (declaration instanceof VariableDeclaration) { + return new VariableStatement({ + kind: declaration.kind, + modifiers: { export: SyntaxKind.ExportKeyword }, + declarations: [declaration], + }); + } + + if (declaration instanceof VariableStatement) { + declaration.modifiers.export = SyntaxKind.ExportKeyword; + return declaration; + } +} + +export function wrap_with_export_assignment_react_component_identifier( + id: Identifier +) { + return new ExportAssignment(id); +} diff --git a/packages/builder-web-react/export/stringfy/css-in-jsx.ts b/packages/builder-web-react/react-css-in-js-widget/css-in-jsx.ts similarity index 100% rename from packages/builder-web-react/export/stringfy/css-in-jsx.ts rename to packages/builder-web-react/react-css-in-js-widget/css-in-jsx.ts diff --git a/packages/builder-web-react/react-css-in-js-widget/index.ts b/packages/builder-web-react/react-css-in-js-widget/index.ts new file mode 100644 index 00000000..249bddb7 --- /dev/null +++ b/packages/builder-web-react/react-css-in-js-widget/index.ts @@ -0,0 +1 @@ +export * from "./css-in-jsx"; diff --git a/packages/builder-web-react/react-functional-component-declaration/index.ts b/packages/builder-web-react/react-functional-component-declaration/index.ts new file mode 100644 index 00000000..146caf46 --- /dev/null +++ b/packages/builder-web-react/react-functional-component-declaration/index.ts @@ -0,0 +1,3 @@ +export function react_functional_component_declaration() { + // +} diff --git a/packages/builder-web-react/build-app/import-specifications/index.ts b/packages/builder-web-react/react-import-specifications/index.ts similarity index 100% rename from packages/builder-web-react/build-app/import-specifications/index.ts rename to packages/builder-web-react/react-import-specifications/index.ts diff --git a/packages/builder-web-react/build-app/import-specifications/react-default.ts b/packages/builder-web-react/react-import-specifications/react-default.ts similarity index 97% rename from packages/builder-web-react/build-app/import-specifications/react-default.ts rename to packages/builder-web-react/react-import-specifications/react-default.ts index b9d55373..e215cfaf 100644 --- a/packages/builder-web-react/build-app/import-specifications/react-default.ts +++ b/packages/builder-web-react/react-import-specifications/react-default.ts @@ -2,7 +2,7 @@ /// This contains default and fundamental imports required for using react library /// -import { standard_libraries } from "../../../builder-web-nodejs"; +import { standard_libraries } from "../../builder-web-nodejs"; import { Import } from "coli"; /** diff --git a/packages/builder-web-react/build-app/import-specifications/with-emotion-styled.ts b/packages/builder-web-react/react-import-specifications/with-emotion-styled.ts similarity index 84% rename from packages/builder-web-react/build-app/import-specifications/with-emotion-styled.ts rename to packages/builder-web-react/react-import-specifications/with-emotion-styled.ts index 52cbbcc8..6da9e67f 100644 --- a/packages/builder-web-react/build-app/import-specifications/with-emotion-styled.ts +++ b/packages/builder-web-react/react-import-specifications/with-emotion-styled.ts @@ -1,4 +1,4 @@ -import { standard_libraries } from "../../../builder-web-nodejs"; +import { standard_libraries } from "../../builder-web-nodejs"; import { Import } from "coli"; /** diff --git a/packages/builder-web-react/build-app/import-specifications/with-styled-components.ts b/packages/builder-web-react/react-import-specifications/with-styled-components.ts similarity index 85% rename from packages/builder-web-react/build-app/import-specifications/with-styled-components.ts rename to packages/builder-web-react/react-import-specifications/with-styled-components.ts index 3b4da08a..33815a4c 100644 --- a/packages/builder-web-react/build-app/import-specifications/with-styled-components.ts +++ b/packages/builder-web-react/react-import-specifications/with-styled-components.ts @@ -1,4 +1,4 @@ -import { standard_libraries } from "../../../builder-web-nodejs"; +import { standard_libraries } from "../../builder-web-nodejs"; import { Import } from "coli"; /** diff --git a/packages/builder-web-react/build-app/index.ts b/packages/builder-web-react/react-project/index.ts similarity index 90% rename from packages/builder-web-react/build-app/index.ts rename to packages/builder-web-react/react-project/index.ts index 693d9a85..ddcbc9d6 100644 --- a/packages/builder-web-react/build-app/index.ts +++ b/packages/builder-web-react/react-project/index.ts @@ -1,6 +1,6 @@ import { Widget } from "@web-builder/core"; -import { standard_libraries, templates } from "@coli.codes/nodejs-builder"; - +import { standard_libraries } from "@coli.codes/nodejs-builder"; +import * as templates from "../templates"; /** * builds create-react-app wrapped react app. * diff --git a/packages/builder-web-react/export/stringfy/styled-component.ts b/packages/builder-web-react/react-styled-component-widget/index.ts similarity index 94% rename from packages/builder-web-react/export/stringfy/styled-component.ts rename to packages/builder-web-react/react-styled-component-widget/index.ts index b4e82c1a..d5defd1f 100644 --- a/packages/builder-web-react/export/stringfy/styled-component.ts +++ b/packages/builder-web-react/react-styled-component-widget/index.ts @@ -18,7 +18,7 @@ import { SourceFile, VariableDeclaration, } from "coli"; -import { react_imports } from "../../build-app/import-specifications"; +import { react_imports } from "../react-import-specifications"; import { TextChildWidget, WidgetTree } from "@web-builder/core"; import { ReactComponentExportResult } from "../export-result"; import { @@ -26,6 +26,7 @@ import { getWidgetStylesConfigMap, WidgetStyleConfigMap, } from "@web-builder/core/builders"; +import { wrap_with_export_assignment_react_component_identifier } from "../react-component-exporting"; const IMPORT_DEFAULT_STYLED_FROM_EMOTION_STYLED = new Import() .importDefault("styled") @@ -157,7 +158,9 @@ function buildReactComponentFile(p: { file.imports(...imports); file.declare(component); file.declare(...styleVariables); - file.export(new ExportAssignment(component.id)); + file.export( + wrap_with_export_assignment_react_component_identifier(component.id) + ); return file; } diff --git a/packages/builder-web-nodejs/templates/create-react-app-typescript/index.ts b/packages/builder-web-react/templates/create-react-app-typescript/index.ts similarity index 92% rename from packages/builder-web-nodejs/templates/create-react-app-typescript/index.ts rename to packages/builder-web-react/templates/create-react-app-typescript/index.ts index de71ad2d..05d82cdb 100644 --- a/packages/builder-web-nodejs/templates/create-react-app-typescript/index.ts +++ b/packages/builder-web-react/templates/create-react-app-typescript/index.ts @@ -1,4 +1,4 @@ -import { PackageManifest } from "../../package/manifest"; +import { PackageManifest } from "../../../builder-web-nodejs/package/manifest"; /** * ``` diff --git a/packages/builder-web-nodejs/templates/index.ts b/packages/builder-web-react/templates/index.ts similarity index 100% rename from packages/builder-web-nodejs/templates/index.ts rename to packages/builder-web-react/templates/index.ts diff --git a/packages/builder-web-styled-components/styled-component-declaration.ts b/packages/builder-web-styled-components/styled-component-declaration.ts index 12fa9173..0b373956 100644 --- a/packages/builder-web-styled-components/styled-component-declaration.ts +++ b/packages/builder-web-styled-components/styled-component-declaration.ts @@ -15,7 +15,7 @@ import { } from "@coli.codes/naming"; import { CSSProperties, buildCssStandard } from "@coli.codes/css"; import { handle } from "@coli.codes/builder"; -import { formatStyledTempplateString } from "./formatter"; +import { formatStyledTempplateString } from "./styled-variable-formatter"; export class StyledComponentDeclaration extends VariableDeclaration { static styledIdentifier = new Identifier("styled"); diff --git a/packages/builder-web-styled-components/formatter.ts b/packages/builder-web-styled-components/styled-variable-formatter.ts similarity index 95% rename from packages/builder-web-styled-components/formatter.ts rename to packages/builder-web-styled-components/styled-variable-formatter.ts index 09be5b42..43353e96 100644 --- a/packages/builder-web-styled-components/formatter.ts +++ b/packages/builder-web-styled-components/styled-variable-formatter.ts @@ -6,7 +6,7 @@ /** * from * ``` - * ` + * styled.span` * color: white; * width: 24px; * ` @@ -14,7 +14,7 @@ * * to * ``` - * ` + * styled.span` * color: white; * width: 24px; * ` diff --git a/packages/coli b/packages/coli index bbc88e4d..519de9d7 160000 --- a/packages/coli +++ b/packages/coli @@ -1 +1 @@ -Subproject commit bbc88e4d1232e955bc16ab827f47b9c1140ee648 +Subproject commit 519de9d7ebe17cd7b5d0f97d966ee5f239434edd diff --git a/packages/designto-react/app/index.ts b/packages/designto-react/app/index.ts new file mode 100644 index 00000000..98183081 --- /dev/null +++ b/packages/designto-react/app/index.ts @@ -0,0 +1,27 @@ +import { Widget } from "@reflect-ui/core"; +import { buildWebWidgetFromTokens } from "@designto/web/tokens-to-web-widget"; +import { + WidgetTree, + stringfyReactWidget_STYLED_COMPONENTS, +} from "@web-builder/react"; +import { react as config } from "@designto/config"; + +export function buildReactApp( + widget: WidgetTree, + options: { template: "cra" | "nextjs" } +): config.ReactComponentOutput { + const res = stringfyReactWidget_STYLED_COMPONENTS(widget); + return { + id: widget.key.id, + name: widget.key.name, + code: { raw: res.code }, + scaffold: { raw: res.code }, + }; +} + +export function buildReactWidget(widget: Widget) { + if (!widget) { + throw "A valid reflect widget manifest should be passed as an input. none was passed."; + } + return buildWebWidgetFromTokens(widget); +} diff --git a/packages/designto-react/index.ts b/packages/designto-react/index.ts index 98183081..e9937274 100644 --- a/packages/designto-react/index.ts +++ b/packages/designto-react/index.ts @@ -1,27 +1,2 @@ -import { Widget } from "@reflect-ui/core"; -import { buildWebWidgetFromTokens } from "@designto/web/tokens-to-web-widget"; -import { - WidgetTree, - stringfyReactWidget_STYLED_COMPONENTS, -} from "@web-builder/react"; -import { react as config } from "@designto/config"; - -export function buildReactApp( - widget: WidgetTree, - options: { template: "cra" | "nextjs" } -): config.ReactComponentOutput { - const res = stringfyReactWidget_STYLED_COMPONENTS(widget); - return { - id: widget.key.id, - name: widget.key.name, - code: { raw: res.code }, - scaffold: { raw: res.code }, - }; -} - -export function buildReactWidget(widget: Widget) { - if (!widget) { - throw "A valid reflect widget manifest should be passed as an input. none was passed."; - } - return buildWebWidgetFromTokens(widget); -} +export * from "./app"; +export * as k from "./k"; diff --git a/packages/designto-react/k/csb-template.ts b/packages/designto-react/k/csb-template.ts new file mode 100644 index 00000000..9901069e --- /dev/null +++ b/packages/designto-react/k/csb-template.ts @@ -0,0 +1,64 @@ +export const create_react_app_typescript_starter = { + template: "create-react-app-typescript", + package_json: `{ + "name": "@made-with-grida/react-typescript", + "version": "1.0.0", + "description": "React and TypeScript example starter project", + "keywords": [ + "typescript", + "react", + "starter" + ], + "main": "src/index.tsx", + "dependencies": { + "react": "17.0.2", + "react-dom": "17.0.2", + "react-scripts": "4.0.0", + "@emotion/react": "^11.1.5", + "@emotion/styled": "^11.1.5" + }, + "devDependencies": { + "@types/react": "17.0.0", + "@types/react-dom": "17.0.0", + "typescript": "4.1.3" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +}`, + + tsconfig_json: `{ + "include": [ + "./src/**/*" + ], + "compilerOptions": { + "strict": true, + "esModuleInterop": true, + "lib": [ + "dom", + "es2015" + ], + "jsx": "react-jsx" + } +}`, + + index_tsx: (component_name: string) => `import React from "react"; +import { render } from "react-dom"; + +import ${component_name} from "./App"; + +const rootElement = document.getElementById("root"); +render(<${component_name} />, rootElement); +`, + + app_tsx: (content: string) => content, +}; diff --git a/packages/designto-react/k/index.ts b/packages/designto-react/k/index.ts new file mode 100644 index 00000000..7ce82920 --- /dev/null +++ b/packages/designto-react/k/index.ts @@ -0,0 +1 @@ +export * from "./csb-template"; diff --git a/packages/designto-react/react-package-json-make/index.ts b/packages/designto-react/react-package-json-make/index.ts new file mode 100644 index 00000000..2ec5cb41 --- /dev/null +++ b/packages/designto-react/react-package-json-make/index.ts @@ -0,0 +1,43 @@ +// "@emotion/react": "^11.1.5", +// "@emotion/styled": "^11.1.5" + +export function make_create_react_app_typescript_package_json({ + name = "src/index.tsx", + description = "React and TypeScript example starter project", + main, + dependencies = {}, +}: { + name: string; + description?: string; + main: string; + dependencies?: { + [key: string]: string; + }; +}) { + const package_json = { + name: `@made-with-grida/${name}`, + version: "0.0.0", + description: description, + keywords: ["grida", "design to code", "made with grida"], + main: main, + dependencies: { + react: "17.0.2", + "react-dom": "17.0.2", + "react-scripts": "4.0.0", + ...dependencies, + }, + devDependencies: { + "@types/react": "17.0.0", + "@types/react-dom": "17.0.0", + typescript: "4.1.3", + }, + scripts: { + start: "react-scripts start", + build: "react-scripts build", + test: "react-scripts test --env=jsdom", + eject: "react-scripts eject", + }, + browserslist: [">0.2%", "not dead", "not ie <= 11", "not op_mini all"], + }; + return JSON.stringify(package_json, null, 2); +} diff --git a/packages/support-flags/--hash/README.md b/packages/support-flags/--hash/README.md new file mode 100644 index 00000000..6a6a5d74 --- /dev/null +++ b/packages/support-flags/--hash/README.md @@ -0,0 +1,25 @@ +# Hash + +> Hash is a unique id indicator just like `--id`, but for a asset such as vector & images + +## Allowed on + +- layer with single image fill (a image) +- a vector layer + +## Use with `--main` + +``` +vector layer 1 --hash=my-brand-logo +vector layer 2 --hash=my-brand-logo --main +``` + +Now vector 1 & 2 will use the same svg data, based on vector 2's svg data (since it's marked with `--main`). + +- do - set one layer as main +- don't - set multiple layer with same hash with main (will show warning) +- don't - no main layer specified - will use the first hit item. + +## See also + +- [`--id`](../--id/README.md) diff --git a/packages/support-flags/--id/README.md b/packages/support-flags/--id/README.md index 2dfa2b02..1ffb5c29 100644 --- a/packages/support-flags/--id/README.md +++ b/packages/support-flags/--id/README.md @@ -8,3 +8,7 @@ by specifing the id flag, you can take advantage in below scenarios. - id="value" on generated html output. + +## See also + +- [`--hash`](../--hash/README.md) diff --git a/packages/support-flags/--module/index.ts b/packages/support-flags/--module/index.ts new file mode 100644 index 00000000..e17ab0aa --- /dev/null +++ b/packages/support-flags/--module/index.ts @@ -0,0 +1,5 @@ +export const flag_key__module = "module"; +export interface ModuleFlag { + flag: typeof flag_key__module; + value: boolean | string; +} diff --git a/packages/support-flags/index.ts b/packages/support-flags/index.ts index 384b51c2..a1d48997 100644 --- a/packages/support-flags/index.ts +++ b/packages/support-flags/index.ts @@ -2,7 +2,7 @@ import { parse as parseflags } from "@design-sdk/flags/parsing-strategy-dashdash import { flag_key__artwork } from "./--artwork"; import { flag_key__as_wrap } from "./--as-wrap"; - +import { flag_key__module } from "./--module"; export * from "./types"; export function parse(name: string) { @@ -16,6 +16,10 @@ export function parse(name: string) { name: flag_key__as_wrap, type: "bool", }, + { + name: flag_key__module, + type: "bool", // TODO: support string also. + }, //. TODO: add other flags under here. ]); } catch (_) { diff --git a/yarn.lock b/yarn.lock index 8084c61c..79f2f1f2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1755,7 +1755,7 @@ "@types/yargs" "^16.0.0" chalk "^4.0.0" -"@material-ui/core@^4.11.4": +"@material-ui/core@^4.12.3": version "4.12.3" resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.12.3.tgz#80d665caf0f1f034e52355c5450c0e38b099d3ca" integrity sha512-sdpgI/PL56QVsEJldwEe4FFaFTLUqN+rd7sSZiRCdx2E/C7z5yK0y/khAWVBH24tXwto7I1hCzNWfJGZIYJKnw== @@ -1780,7 +1780,7 @@ dependencies: "@babel/runtime" "^7.4.4" -"@material-ui/lab@^4.0.0-alpha.58": +"@material-ui/lab@^4.0.0-alpha.60": version "4.0.0-alpha.60" resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.60.tgz#5ad203aed5a8569b0f1753945a21a05efa2234d2" integrity sha512-fadlYsPJF+0fx2lRuyqAuJj7hAS1tLDdIEEdov5jlrpb5pp4b+mRDUqQTUxi4inRZHS1bEXpU8QWUhO6xX88aA==