@codesandbox/sandpack-react - npm Package Compare versions

Comparing version 0.1.8 to 0.1.9-beta.1

dist/cjs/types.js

@@ -1,3 +0,2 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=types.js.map
+var t=Object.defineProperty;var n=e=>t(e,"__esModule",{value:!0});n(exports);
+//# sourceMappingURL=types.js.map

dist/esm/types.js

@@ -1,2 +0,1 @@
-export {};
-//# sourceMappingURL=types.js.map
+//# sourceMappingURL=types.js.map

package.json

 {
   "name": "@codesandbox/sandpack-react",
-  "version": "0.1.8",
+  "version": "0.1.9-beta.1",
   "description": "",
@@ -14,9 +14,9 @@ "keywords": [],
   "module": "dist/esm/index.js",
-  "types": "dist/cjs/index.d.ts",
+  "types": "dist/types/index.d.ts",
   "sideEffects": false,
   "scripts": {
-    "prebuild": "rimraf dist",
-    "build": "yarn build:cjs && yarn build:esm && yarn build:css",
-    "build:cjs": "tsc -p tsconfig.cjs.json",
-    "build:esm": "tsc -p tsconfig.esm.json",
+    "clean": "rimraf dist",
+    "prebuild": "yarn run clean",
+    "build": "node build.js && yarn run build:types && yarn build:css",
+    "build:types": "tsc -p tsconfig.json",
     "build:css": "postcss src/styles/index.css -o dist/index.css -u autoprefixer -u cssnano",
@@ -47,6 +47,5 @@ "start": "tsc -p tsconfig.esm.json --watch",
     "@codemirror/view": "^0.18.0",
-    "@codesandbox/sandpack-client": "^0.1.8",
-    "codesandbox-import-utils": "^2.2.3",
+    "@codesandbox/sandpack-client": "^0.1.9-beta.1",
     "codesandbox-import-util-types": "^2.2.3",
-    "prism-react-renderer": "^1.1.1"
+    "codesandbox-import-utils": "^2.2.3"
   },
@@ -53,0 +52,0 @@ "devDependencies": {

README.md

@@ -9,3 +9,3 @@ # sandpack-react
 
-Sandpack is an open ecoystem of components and utilities that allow you to
+Sandpack is an open ecosystem of components and utilities that allow you to
 compile and run modern frameworks in the browser. You can either use one of our
@@ -451,2 +451,23 @@ predefined `components` for embedding the _CodeSandbox_ experience into your
 
+##### SandpackCodeViewer props
+
+It is a Codemirror instance in a read-only and is used to syntax-highlight code.
+
+| name            | type            | default                           | description                                                             |
+| --------------- | --------------- | --------------------------------- | ----------------------------------------------------------------------- |
+| showTabs        | boolean         | computed based on number of files | The FileTabs component is shown on top of the editor based on this flag |
+| showLineNumbers | boolean         | false                             | Adds a column with line numbers on the left side of the code editor     |
+| code            | string          | undefined                         | The code to display in the editor                                       |
+| decorators      | type Decorators | undefined                         | An array of Codemirror decorations to apply to the code                 |
+
+```ts
+type Decorators = Array<{
+  className?: string;
+  line: number;
+  startColumn?: number;
+  endColumn?: number;
+  elementAttributes?: Record<string, string>;
+}>;
+```
+
 #### SandpackPreview props
@@ -548,2 +569,18 @@
 
+#### All methods
+
+Plus, `useSandpack` exposes a bunch of methods that you can use to manage the current state of the Sandpack instance:
+
+| Method          | Description                                   |
+| --------------- | --------------------------------------------- |
+| `closeFile`     | Close the given path in the editor            |
+| `deleteFile`    | Delete the given path in the editor           |
+| `dispatch`      | Sends a message to the bundler                |
+| `listen`        | Listens for messages from the bundler         |
+| `openFile`      | Open the given path in the editor             |
+| `resetAllFiles` | Reset all files for all paths                 |
+| `resetFile`     | Reset the code for a given path               |
+| `setActiveFile` | Set a specific file as active in a given path |
+| `updateFile`    | Update the content of a file in a given path  |
+
 #### useActiveCode, useCodeSandboxLink, useSandpackNavigation
@@ -550,0 +587,0 @@

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3897502

increased by733.8%

Dependency count

19

decreased by-5%

Number of lines in readme file

675

increased by5.8%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of package files

59

decreased by-80.13%

Lines of code

4391

decreased by-23.83%

Number of medium supply chain risk alerts

3

increased byInfinity%

Dependency changes

• - Removedprism-react-renderer@^1.1.1

• - Removedprism-react-renderer@1.3.5(transitive)

• Updated@codesandbox/sandpack-client@^0.1.9-beta.1