@codesandbox/sandpack-react - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

dist/cjs/components/Preview/index.js

@@ -29,7 +29,9 @@ "use strict";
     var _j = React.useState(null), iframeComputedHeight = _j[0], setComputedAutoHeight = _j[1];
-    var status = sandpack.status, iframeRef = sandpack.iframeRef, errorScreenRegisteredRef = sandpack.errorScreenRegisteredRef, openInCSBRegisteredRef = sandpack.openInCSBRegisteredRef;
+    var status = sandpack.status, iframeRef = sandpack.iframeRef, errorScreenRegisteredRef = sandpack.errorScreenRegisteredRef, openInCSBRegisteredRef = sandpack.openInCSBRegisteredRef, loadingScreenRegisteredRef = sandpack.loadingScreenRegisteredRef;
     var c = classer_1.useClasser("sp");
+    // SandpackPreview immediately registers the custom screens/components so the bundler does not render any of them
+    openInCSBRegisteredRef.current = true;
+    errorScreenRegisteredRef.current = true;
+    loadingScreenRegisteredRef.current = true;
     React.useEffect(function () {
-        errorScreenRegisteredRef.current = true;
-        openInCSBRegisteredRef.current = true;
         var unsub = listen(function (message) {
@@ -36,0 +38,0 @@ if (message.type === "resize" && iframeRef.current) {

dist/cjs/contexts/sandpackContext.js

@@ -187,5 +187,6 @@ "use strict";
         _this._getSandpackState = function () {
-            var _a = _this.state, files = _a.files, activePath = _a.activePath, openPaths = _a.openPaths, startRoute = _a.startRoute, bundlerState = _a.bundlerState, editorState = _a.editorState, error = _a.error, sandpackStatus = _a.sandpackStatus;
+            var _a = _this.state, files = _a.files, activePath = _a.activePath, openPaths = _a.openPaths, startRoute = _a.startRoute, bundlerState = _a.bundlerState, editorState = _a.editorState, error = _a.error, sandpackStatus = _a.sandpackStatus, environment = _a.environment;
             return {
                 files: files,
+                environment: environment,
                 openPaths: openPaths,
@@ -247,10 +248,9 @@ activePath: activePath,
             this.intersectionObserver = new IntersectionObserver(function (entries) {
-                var _a;
+                var _a, _b;
                 if (((_a = entries[0]) === null || _a === void 0 ? void 0 : _a.intersectionRatio) > 0) {
                     // Delay a cycle so all hooks register the refs for the sub-components (open in csb, loading, error overlay)
                     setTimeout(function () {
-                        var _a;
-                        (_a = _this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.unobserve(_this.lazyAnchorRef.current);
                         _this.runSandpack();
-                    });
+                    }, 50);
+                    (_b = _this.intersectionObserver) === null || _b === void 0 ? void 0 : _b.unobserve(_this.lazyAnchorRef.current);
                 }
@@ -261,4 +261,4 @@ }, options);
         else {
-            // else run the sandpack on the spot
-            setTimeout(function () { return _this.runSandpack(); });
+            // else run the sandpack on mount, with a slight delay to allow all subcomponents to mount/register components
+            setTimeout(function () { return _this.runSandpack(); }, 50);
         }
@@ -265,0 +265,0 @@ };

dist/cjs/hooks/useCodeSandboxLink.js

@@ -18,3 +18,3 @@ "use strict";
 var useSandpack_1 = require("./useSandpack");
-var getFileParameters = function (files) {
+var getFileParameters = function (files, environment) {
     var normalized = Object.keys(files).reduce(function (prev, next) {
@@ -27,7 +27,7 @@ var _a;
     }, {});
-    return define_1.getParameters({ files: normalized });
+    return define_1.getParameters(__assign({ files: normalized }, (environment ? { template: environment } : null)));
 };
 exports.useCodeSandboxLink = function () {
     var sandpack = useSandpack_1.useSandpack().sandpack;
-    var params = getFileParameters(sandpack.files);
+    var params = getFileParameters(sandpack.files, sandpack.environment);
     // Register the usage of the codesandbox link
@@ -34,0 +34,0 @@ React.useEffect(function () {

dist/cjs/templates/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SANDBOX_TEMPLATES = void 0;
+var angular_1 = require("./angular");
 var react_1 = require("./react");
 var vanilla_1 = require("./vanilla");
 var vue_1 = require("./vue");
+var vue3_1 = require("./vue3");
 exports.SANDBOX_TEMPLATES = {
@@ -11,3 +13,5 @@ react: react_1.REACT_TEMPLATE,
     vanilla: vanilla_1.VANILLA_TEMPLATE,
+    vue3: vue3_1.VUE_TEMPLATE_3,
+    angular: angular_1.ANGULAR_TEMPLATE
 };
 //# sourceMappingURL=index.js.map

dist/cjs/types.d.ts

 import type { BundlerState, Dispatch, Listen, SandpackBundlerFiles, SandpackError } from "@codesandbox/sandpack-client";
+import type { ITemplate } from "codesandbox-import-util-types";
 export declare type SandpackContext = SandpackState & {
@@ -14,2 +15,3 @@ dispatch: Dispatch;
     files: SandpackBundlerFiles;
+    environment?: SandboxEnvironment;
     status: SandpackStatus;
@@ -49,4 +51,4 @@ runSandpack: () => void;
 }
-export declare type SandboxEnvironment = "adonis" | "create-react-app" | "vue-cli" | "preact-cli" | "svelte" | "create-react-app-typescript" | "angular-cli" | "parcel" | "cxjs" | "@dojo/cli-create-app" | "gatsby" | "marko" | "nuxt" | "next" | "reason" | "apollo" | "sapper" | "nest" | "static" | "styleguidist" | "gridsome" | "vuepress" | "mdx-deck" | "quasar-framework" | "unibit" | "node" | "ember" | "custom" | "babel-repl";
-export declare type SandpackPredefinedTemplate = "react" | "vue" | "vanilla";
+export declare type SandboxEnvironment = ITemplate;
+export declare type SandpackPredefinedTemplate = "angular" | "react" | "vanilla" | "vue" | "vue3";
 export declare type SandpackPredefinedTheme = "codesandbox-light" | "codesandbox-dark" | "night-owl" | "aqua-blue" | "monokai-pro";
@@ -53,0 +55,0 @@ export interface SandpackSyntaxStyle {

dist/cjs/utils/sandpackUtils.d.ts

@@ -11,2 +11,2 @@ import type { SandpackBundlerFile } from "@codesandbox/sandpack-client";
 export declare const getSandpackStateFromProps: (props: SandpackProviderProps) => SandpackContextInfo;
-export declare const getSetup: (template?: "react" | "vue" | "vanilla" | undefined, inputSetup?: SandpackSetup | undefined) => SandboxTemplate;
+export declare const getSetup: (template?: "angular" | "react" | "vanilla" | "vue" | "vue3" | undefined, inputSetup?: SandpackSetup | undefined) => SandboxTemplate;

dist/esm/components/Preview/index.js

@@ -14,7 +14,9 @@ import { useClasser } from "@code-hike/classer";
     const [iframeComputedHeight, setComputedAutoHeight] = React.useState(null);
-    const { status, iframeRef, errorScreenRegisteredRef, openInCSBRegisteredRef, } = sandpack;
+    const { status, iframeRef, errorScreenRegisteredRef, openInCSBRegisteredRef, loadingScreenRegisteredRef, } = sandpack;
     const c = useClasser("sp");
+    // SandpackPreview immediately registers the custom screens/components so the bundler does not render any of them
+    openInCSBRegisteredRef.current = true;
+    errorScreenRegisteredRef.current = true;
+    loadingScreenRegisteredRef.current = true;
     React.useEffect(() => {
-        errorScreenRegisteredRef.current = true;
-        openInCSBRegisteredRef.current = true;
         const unsub = listen((message) => {
@@ -21,0 +23,0 @@ if (message.type === "resize" && iframeRef.current) {

dist/esm/contexts/sandpackContext.js

@@ -152,5 +152,6 @@ import { SandpackClient, extractErrorDetails, } from "@codesandbox/sandpack-client";
         this._getSandpackState = () => {
-            const { files, activePath, openPaths, startRoute, bundlerState, editorState, error, sandpackStatus, } = this.state;
+            const { files, activePath, openPaths, startRoute, bundlerState, editorState, error, sandpackStatus, environment, } = this.state;
             return {
                 files,
+                environment,
                 openPaths,
@@ -210,10 +211,9 @@ activePath,
             this.intersectionObserver = new IntersectionObserver((entries) => {
-                var _a;
+                var _a, _b;
                 if (((_a = entries[0]) === null || _a === void 0 ? void 0 : _a.intersectionRatio) > 0) {
                     // Delay a cycle so all hooks register the refs for the sub-components (open in csb, loading, error overlay)
                     setTimeout(() => {
-                        var _a;
-                        (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.lazyAnchorRef.current);
                         this.runSandpack();
-                    });
+                    }, 50);
+                    (_b = this.intersectionObserver) === null || _b === void 0 ? void 0 : _b.unobserve(this.lazyAnchorRef.current);
                 }
@@ -224,4 +224,4 @@ }, options);
         else {
-            // else run the sandpack on the spot
-            setTimeout(() => this.runSandpack());
+            // else run the sandpack on mount, with a slight delay to allow all subcomponents to mount/register components
+            setTimeout(() => this.runSandpack(), 50);
         }
@@ -228,0 +228,0 @@ }

dist/esm/hooks/useCodeSandboxLink.js

 import { getParameters } from "codesandbox-import-utils/lib/api/define";
 import * as React from "react";
 import { useSandpack } from "./useSandpack";
-const getFileParameters = (files) => {
+const getFileParameters = (files, environment) => {
     const normalized = Object.keys(files).reduce((prev, next) => ({
@@ -12,7 +12,10 @@ ...prev,
     }), {});
-    return getParameters({ files: normalized });
+    return getParameters({
+        files: normalized,
+        ...(environment ? { template: environment } : null),
+    });
 };
 export const useCodeSandboxLink = () => {
     const { sandpack } = useSandpack();
-    const params = getFileParameters(sandpack.files);
+    const params = getFileParameters(sandpack.files, sandpack.environment);
     // Register the usage of the codesandbox link
@@ -19,0 +22,0 @@ React.useEffect(() => {

dist/esm/templates/index.js

@@ -0,4 +1,6 @@
+import { ANGULAR_TEMPLATE } from "./angular";
 import { REACT_TEMPLATE } from "./react";
 import { VANILLA_TEMPLATE } from "./vanilla";
 import { VUE_TEMPLATE } from "./vue";
+import { VUE_TEMPLATE_3 } from "./vue3";
 export const SANDBOX_TEMPLATES = {
@@ -8,3 +10,5 @@ react: REACT_TEMPLATE,
     vanilla: VANILLA_TEMPLATE,
+    vue3: VUE_TEMPLATE_3,
+    angular: ANGULAR_TEMPLATE
 };
 //# sourceMappingURL=index.js.map

dist/esm/types.d.ts

 import type { BundlerState, Dispatch, Listen, SandpackBundlerFiles, SandpackError } from "@codesandbox/sandpack-client";
+import type { ITemplate } from "codesandbox-import-util-types";
 export declare type SandpackContext = SandpackState & {
@@ -14,2 +15,3 @@ dispatch: Dispatch;
     files: SandpackBundlerFiles;
+    environment?: SandboxEnvironment;
     status: SandpackStatus;
@@ -49,4 +51,4 @@ runSandpack: () => void;
 }
-export declare type SandboxEnvironment = "adonis" | "create-react-app" | "vue-cli" | "preact-cli" | "svelte" | "create-react-app-typescript" | "angular-cli" | "parcel" | "cxjs" | "@dojo/cli-create-app" | "gatsby" | "marko" | "nuxt" | "next" | "reason" | "apollo" | "sapper" | "nest" | "static" | "styleguidist" | "gridsome" | "vuepress" | "mdx-deck" | "quasar-framework" | "unibit" | "node" | "ember" | "custom" | "babel-repl";
-export declare type SandpackPredefinedTemplate = "react" | "vue" | "vanilla";
+export declare type SandboxEnvironment = ITemplate;
+export declare type SandpackPredefinedTemplate = "angular" | "react" | "vanilla" | "vue" | "vue3";
 export declare type SandpackPredefinedTheme = "codesandbox-light" | "codesandbox-dark" | "night-owl" | "aqua-blue" | "monokai-pro";
@@ -53,0 +55,0 @@ export interface SandpackSyntaxStyle {

dist/esm/utils/sandpackUtils.d.ts

@@ -11,2 +11,2 @@ import type { SandpackBundlerFile } from "@codesandbox/sandpack-client";
 export declare const getSandpackStateFromProps: (props: SandpackProviderProps) => SandpackContextInfo;
-export declare const getSetup: (template?: "react" | "vue" | "vanilla" | undefined, inputSetup?: SandpackSetup | undefined) => SandboxTemplate;
+export declare const getSetup: (template?: "angular" | "react" | "vanilla" | "vue" | "vue3" | undefined, inputSetup?: SandpackSetup | undefined) => SandboxTemplate;

package.json

 {
   "name": "@codesandbox/sandpack-react",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "",
@@ -46,4 +46,5 @@ "keywords": [],
     "@codemirror/view": "^0.18.0",
-    "@codesandbox/sandpack-client": "^0.0.5",
-    "codesandbox-import-utils": "^1.2.3",
+    "@codesandbox/sandpack-client": "^0.0.6",
+    "codesandbox-import-utils": "^2.2.3",
+    "codesandbox-import-util-types": "^2.2.3",
     "prism-react-renderer": "^1.1.1"
@@ -50,0 +51,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

414855

increased by3.18%

Number of package files

291

increased by4.3%

Lines of code

5140

increased by5.09%

Worsened metrics

Dependency count

20

increased by5.26%

Dependency changes

• + Addedcodesandbox-import-util-types@^2.2.3

• + Added@codesandbox/sandpack-client@0.0.6(transitive)

• + Addedcodesandbox-import-util-types@2.3.0(transitive)

• + Addedcodesandbox-import-utils@2.3.0(transitive)

• - Removed@codesandbox/sandpack-client@0.0.5(transitive)

• Updated@codesandbox/sandpack-client@^0.0.6

• Updatedcodesandbox-import-utils@^2.2.3