From 0d4e41ee3847404a29b9b929260d30751d858160 Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Tue, 19 Apr 2022 14:30:32 +0000 Subject: [PATCH 1/5] Update 3 files --- sandpack-react/src/Playground.stories.tsx | 43 ++++++++++++++++++++++- sandpack-react/src/types.ts | 3 +- yarn.lock | 40 ++++----------------- 3 files changed, 51 insertions(+), 35 deletions(-) diff --git a/sandpack-react/src/Playground.stories.tsx b/sandpack-react/src/Playground.stories.tsx index 898490ef1..1af4e3303 100644 --- a/sandpack-react/src/Playground.stories.tsx +++ b/sandpack-react/src/Playground.stories.tsx @@ -4,6 +4,47 @@ export default { title: "Intro/Playground", }; +const files = { + "/public/index.html": ` + + + + + Document + + +
+ +`, + "/main.tsx": `import { createSignal, onCleanup } from "solid-js"; +import { render } from "solid-js/web"; + +const CountingComponent = () => { + const [count, setCount] = createSignal(0); + const interval = setInterval( + () => setCount(c => c + 1), + 1000 + ); + onCleanup(() => clearInterval(interval)); + return
Count value is {count()}
; +}; + +render(() => , document.getElementById("app"));`, +}; + export const Main = (): JSX.Element => { - return ; + return ( + + ); }; diff --git a/sandpack-react/src/types.ts b/sandpack-react/src/types.ts index b5a325629..76e201268 100644 --- a/sandpack-react/src/types.ts +++ b/sandpack-react/src/types.ts @@ -156,7 +156,8 @@ export type SandboxEnvironment = | "svelte" | "parcel" | "vue-cli" - | "static"; + | "static" + | "solid"; export type SandpackPredefinedTemplate = | "angular" diff --git a/yarn.lock b/yarn.lock index bc9e3ed95..54ac3041b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5251,6 +5251,11 @@ resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.178.tgz#341f6d2247db528d4a13ddbb374bcdc80406f4f8" integrity sha512-0d5Wd09ItQWH1qFbEyQ7oTQ3GZrMfth5JkbN3EvTKLXcHLRDSXeLnlvlOn0wvxVIwK5o2M8JzP/OWz7T3NRsbw== +"@types/lz-string@^1.3.34": + version "1.3.34" + resolved "https://registry.yarnpkg.com/@types/lz-string/-/lz-string-1.3.34.tgz#69bfadde419314b4a374bf2c8e58659c035ed0a5" + integrity sha512-j6G1e8DULJx3ONf6NdR5JiR2ZY3K3PaaqiEuKYkLQO0Czfi1AzrtjfnfCROyWGeDd5IVMKCwsgSmMip9OWijow== + "@types/mdast@^3.0.0": version "3.0.10" resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.10.tgz#4724244a82a4598884cbbe9bcfd73dff927ee8af" @@ -7047,7 +7052,7 @@ binary-extensions@^2.0.0: resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d" integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA== -binaryextensions@2, binaryextensions@^2.1.2: +binaryextensions@2: version "2.3.0" resolved "https://registry.yarnpkg.com/binaryextensions/-/binaryextensions-2.3.0.tgz#1d269cbf7e6243ea886aa41453c3651ccbe13c22" integrity sha512-nAihlQsYGyc5Bwq6+EsubvANYGExeJKHDO3RjnvwU042fawQTQfM3Kxn7IHUXQOz4bzfwsGYYHGSvXyW4zOGLg== @@ -8076,15 +8081,6 @@ codesandbox-import-utils@^1.2.3: istextorbinary "2.2.1" lz-string "^1.4.4" -codesandbox-import-utils@^2.2.3: - version "2.2.3" - resolved "https://registry.yarnpkg.com/codesandbox-import-utils/-/codesandbox-import-utils-2.2.3.tgz#f7b4801245b381cb8c90fe245e336624e19b6c84" - integrity sha512-ymtmcgZKU27U+nM2qUb21aO8Ut/u2S9s6KorOgG81weP+NA0UZkaHKlaRqbLJ9h4i/4FLvwmEXYAnTjNmp6ogg== - dependencies: - codesandbox-import-util-types "^2.2.3" - istextorbinary "^2.2.1" - lz-string "^1.4.4" - collapse-white-space@^1.0.2: version "1.0.6" resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.6.tgz#e63629c0016665792060dbbeb79c42239d2c5287" @@ -9908,14 +9904,6 @@ editions@^1.3.3: resolved "https://registry.yarnpkg.com/editions/-/editions-1.3.4.tgz#3662cb592347c3168eb8e498a0ff73271d67f50b" integrity sha512-gzao+mxnYDzIysXKMQi/+M1mjy/rjestjg6OPoYTtI+3Izp23oiGZitsl9lPDPiTGXbcSIk1iJWhliSaglxnUg== -editions@^2.2.0: - version "2.3.1" - resolved "https://registry.yarnpkg.com/editions/-/editions-2.3.1.tgz#3bc9962f1978e801312fbd0aebfed63b49bfe698" - integrity sha512-ptGvkwTvGdGfC0hfhKg0MT+TRLRKGtUiWGBInxOm5pz7ssADezahjCUaYuZ8Dr+C05FW0AECIIPt4WBxVINEhA== - dependencies: - errlop "^2.0.0" - semver "^6.3.0" - editorconfig@^0.15.3: version "0.15.3" resolved "https://registry.yarnpkg.com/editorconfig/-/editorconfig-0.15.3.tgz#bef84c4e75fb8dcb0ce5cee8efd51c15999befc5" @@ -10127,11 +10115,6 @@ err-code@^2.0.2: resolved "https://registry.yarnpkg.com/err-code/-/err-code-2.0.3.tgz#23c2f3b756ffdfc608d30e27c9a941024807e7f9" integrity sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA== -errlop@^2.0.0: - version "2.2.0" - resolved "https://registry.yarnpkg.com/errlop/-/errlop-2.2.0.tgz#1ff383f8f917ae328bebb802d6ca69666a42d21b" - integrity sha512-e64Qj9+4aZzjzzFpZC7p5kmm/ccCrbLhAJplhsDXQFs87XTsXwOpH4s1Io2s90Tau/8r2j9f4l/thhDevRjzxw== - errno@^0.1.1, errno@^0.1.3, errno@~0.1.7: version "0.1.8" resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f" @@ -14017,15 +14000,6 @@ istextorbinary@2.2.1: editions "^1.3.3" textextensions "2" -istextorbinary@^2.2.1: - version "2.6.0" - resolved "https://registry.yarnpkg.com/istextorbinary/-/istextorbinary-2.6.0.tgz#60776315fb0fa3999add276c02c69557b9ca28ab" - integrity sha512-+XRlFseT8B3L9KyjxxLjfXSLMuErKDsd8DBNrsaxoViABMEZlOSCstwmw0qpoFX3+U6yWU1yhLudAe6/lETGGA== - dependencies: - binaryextensions "^2.1.2" - editions "^2.2.0" - textextensions "^2.5.0" - iterate-iterator@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/iterate-iterator/-/iterate-iterator-1.0.2.tgz#551b804c9eaa15b847ea6a7cdc2f5bf1ec150f91" @@ -22053,7 +22027,7 @@ text-table@0.2.0, text-table@^0.2.0: resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4" integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ= -textextensions@2, textextensions@^2.5.0: +textextensions@2: version "2.6.0" resolved "https://registry.yarnpkg.com/textextensions/-/textextensions-2.6.0.tgz#d7e4ab13fe54e32e08873be40d51b74229b00fc4" integrity sha512-49WtAWS+tcsy93dRt6P0P3AMD2m5PvXRhuEA0kaXos5ZLlujtYmpmFsB+QvWUSxE1ZsstmYXfQ7L40+EcQgpAQ== From c583ca252144e40b2c798e8f3f758396ff1182f9 Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Wed, 20 Apr 2022 18:21:10 +0100 Subject: [PATCH 2/5] add solid template --- sandpack-react/src/Playground.stories.tsx | 40 ++-------------- sandpack-react/src/templates/index.tsx | 2 + sandpack-react/src/templates/solid.ts | 58 +++++++++++++++++++++++ sandpack-react/src/types.ts | 3 +- 4 files changed, 65 insertions(+), 38 deletions(-) create mode 100644 sandpack-react/src/templates/solid.ts diff --git a/sandpack-react/src/Playground.stories.tsx b/sandpack-react/src/Playground.stories.tsx index 1af4e3303..86cb7ec51 100644 --- a/sandpack-react/src/Playground.stories.tsx +++ b/sandpack-react/src/Playground.stories.tsx @@ -1,50 +1,16 @@ -import { Sandpack } from "../"; +import { Sandpack } from "./"; export default { title: "Intro/Playground", }; -const files = { - "/public/index.html": ` - - - - - Document - - -
- -`, - "/main.tsx": `import { createSignal, onCleanup } from "solid-js"; -import { render } from "solid-js/web"; - -const CountingComponent = () => { - const [count, setCount] = createSignal(0); - const interval = setInterval( - () => setCount(c => c + 1), - 1000 - ); - onCleanup(() => clearInterval(interval)); - return
Count value is {count()}
; -}; - -render(() => , document.getElementById("app"));`, -}; - export const Main = (): JSX.Element => { return ( ); }; diff --git a/sandpack-react/src/templates/index.tsx b/sandpack-react/src/templates/index.tsx index 298734e21..b3fc65faf 100644 --- a/sandpack-react/src/templates/index.tsx +++ b/sandpack-react/src/templates/index.tsx @@ -3,6 +3,7 @@ import type { SandpackPredefinedTemplate, SandboxTemplate } from "../types"; import { ANGULAR_TEMPLATE } from "./angular"; import { REACT_TEMPLATE } from "./react"; import { REACT_TYPESCRIPT_TEMPLATE } from "./react-typescript"; +import { SOLID_TEMPLATE } from "./solid"; import { SVELTE_TEMPLATE } from "./svelte"; import { VANILLA_TEMPLATE } from "./vanilla"; import { VANILLA_TYPESCRIPT_TEMPLATE } from "./vanilla-typescript"; @@ -21,4 +22,5 @@ export const SANDBOX_TEMPLATES: Record< vue3: VUE_TEMPLATE_3, angular: ANGULAR_TEMPLATE, svelte: SVELTE_TEMPLATE, + "solid-beta": SOLID_TEMPLATE, }; diff --git a/sandpack-react/src/templates/solid.ts b/sandpack-react/src/templates/solid.ts new file mode 100644 index 000000000..ac520724a --- /dev/null +++ b/sandpack-react/src/templates/solid.ts @@ -0,0 +1,58 @@ +import type { SandboxTemplate } from "../types"; + +export const SOLID_TEMPLATE: SandboxTemplate = { + files: { + "/App.tsx": { + code: `import { Component } from "solid-js"; + +const App: Component = () => { + return

Hello Solid!

; +}; + +export default App;`, + }, + "/index.tsx": { + code: `import { render } from "solid-js/web"; +import App from "./App"; + +import "./styles.css"; + +render(() => , document.getElementById("app"));`, + }, + "/styles.css": { + code: `body { + font-family: sans-serif; + -webkit-font-smoothing: auto; + -moz-font-smoothing: auto; + -moz-osx-font-smoothing: grayscale; + font-smoothing: auto; + text-rendering: optimizeLegibility; + font-smooth: always; + -webkit-tap-highlight-color: transparent; + -webkit-touch-callout: none; +} + +h1 { + font-size: 1.5rem; +}`, + }, + "/index.html": { + code: ` + + Parcel Sandbox + + + +
+ + +`, + }, + }, + dependencies: { + "solid-js": "1.3.15", + }, + entry: "/index.tsx", + main: "/App.tsx", + environment: "solid", +}; diff --git a/sandpack-react/src/types.ts b/sandpack-react/src/types.ts index 76e201268..7b136088f 100644 --- a/sandpack-react/src/types.ts +++ b/sandpack-react/src/types.ts @@ -167,7 +167,8 @@ export type SandpackPredefinedTemplate = | "vanilla-ts" | "vue" | "vue3" - | "svelte"; + | "svelte" + | "solid-beta"; export type SandpackPredefinedTheme = | "light" From f688c3108bcbd0355aea6427702d8dbdedd0fba0 Mon Sep 17 00:00:00 2001 From: Jasper De Moor Date: Thu, 21 Apr 2022 10:11:01 +0200 Subject: [PATCH 3/5] fix: compile not sending template on hot reload --- sandpack-client/package.json | 3 +-- sandpack-client/src/client.ts | 14 ++++++++++---- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/sandpack-client/package.json b/sandpack-client/package.json index ebb5f143a..193b8e52c 100644 --- a/sandpack-client/package.json +++ b/sandpack-client/package.json @@ -20,8 +20,7 @@ "build:types": "tsc -p tsconfig.json", "lint": "tslint -t codeFrame 'src/**/*.ts' 'test/**/*.ts'", "build:publish": "yarn build && gulp", - "build:bundler": "gulp", - "start": "tsc -p tsconfig.esm.json --watch" + "build:bundler": "gulp" }, "files": [ "dist", diff --git a/sandpack-client/src/client.ts b/sandpack-client/src/client.ts index b8675772d..56bfc87db 100644 --- a/sandpack-client/src/client.ts +++ b/sandpack-client/src/client.ts @@ -237,7 +237,10 @@ export class SandpackClient { sandboxInfo = this.sandboxInfo, isInitializationCompile?: boolean ): void { - this.sandboxInfo = sandboxInfo; + this.sandboxInfo = { + ...this.sandboxInfo, + ...sandboxInfo, + }; const files = this.getFiles(); @@ -279,6 +282,11 @@ export class SandpackClient { {} ); + const template = + this.sandboxInfo.template || getTemplate(packageJSON, normalizedModules); + + console.log({ template, sandboxInfo: this.sandboxInfo }); + this.dispatch({ type: "compile", codesandbox: true, @@ -290,9 +298,7 @@ export class SandpackClient { hasFileResolver: Boolean(this.options.fileResolver), disableDependencyPreprocessing: this.sandboxInfo.disableDependencyPreprocessing, - template: - this.sandboxInfo.template || - getTemplate(packageJSON, normalizedModules), + template, showOpenInCodeSandbox: this.options.showOpenInCodeSandbox ?? true, showErrorScreen: this.options.showErrorScreen ?? true, showLoadingScreen: this.options.showLoadingScreen ?? true, From 4e7e6683a6d06559bdc789ff07689387425bee9a Mon Sep 17 00:00:00 2001 From: Jasper De Moor Date: Thu, 21 Apr 2022 10:19:35 +0200 Subject: [PATCH 4/5] remove console.log --- sandpack-client/src/client.ts | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/sandpack-client/src/client.ts b/sandpack-client/src/client.ts index 56bfc87db..7f3bf5609 100644 --- a/sandpack-client/src/client.ts +++ b/sandpack-client/src/client.ts @@ -282,11 +282,6 @@ export class SandpackClient { {} ); - const template = - this.sandboxInfo.template || getTemplate(packageJSON, normalizedModules); - - console.log({ template, sandboxInfo: this.sandboxInfo }); - this.dispatch({ type: "compile", codesandbox: true, @@ -298,7 +293,9 @@ export class SandpackClient { hasFileResolver: Boolean(this.options.fileResolver), disableDependencyPreprocessing: this.sandboxInfo.disableDependencyPreprocessing, - template, + template: + this.sandboxInfo.template || + getTemplate(packageJSON, normalizedModules), showOpenInCodeSandbox: this.options.showOpenInCodeSandbox ?? true, showErrorScreen: this.options.showErrorScreen ?? true, showLoadingScreen: this.options.showLoadingScreen ?? true, From 85da0a571c0503d31fc055801952ead043fffa09 Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Thu, 21 Apr 2022 10:07:18 +0100 Subject: [PATCH 5/5] add log level on preset --- sandpack-react/src/Playground.stories.tsx | 9 +-------- sandpack-react/src/presets/Sandpack.tsx | 3 +++ 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/sandpack-react/src/Playground.stories.tsx b/sandpack-react/src/Playground.stories.tsx index 86cb7ec51..a8bfc2639 100644 --- a/sandpack-react/src/Playground.stories.tsx +++ b/sandpack-react/src/Playground.stories.tsx @@ -5,12 +5,5 @@ export default { }; export const Main = (): JSX.Element => { - return ( - - ); + return ; }; diff --git a/sandpack-react/src/presets/Sandpack.tsx b/sandpack-react/src/presets/Sandpack.tsx index 3bd6743d9..83a627791 100644 --- a/sandpack-react/src/presets/Sandpack.tsx +++ b/sandpack-react/src/presets/Sandpack.tsx @@ -1,4 +1,5 @@ import { ClasserProvider } from "@code-hike/classer"; +import type { SandpackLogLevel } from "@codesandbox/sandpack-client"; import * as React from "react"; import { SandpackLayout } from "../common/Layout"; @@ -69,6 +70,7 @@ export interface SandpackProps { * appears when `readOnly` is `true` */ showReadOnly?: boolean; + logLevel?: SandpackLogLevel; }; } @@ -118,6 +120,7 @@ export const Sandpack: React.FC = (props) => { initMode: props.options?.initMode, initModeObserverOptions: props.options?.initModeObserverOptions, externalResources: props.options?.externalResources, + logLevel: props.options?.logLevel, }; // Parts are set as `flex` values, so they set the flex shrink/grow