simple-playground-web

A web playground library can be used without server api.

Packages

Package name	Path	Description
@simple-playground-web/storybook	./.storybook
with-react	./examples/with-react
@simple-playground-web/bundler	./packages/cores/bundler	The web bundler
@simple-playground-web/core	./packages/cores/core	Core models
@simple-playground-web/fs	./packages/cores/fs	File system implementation in web
@simple-playground-web/playground	./packages/cores/playground	Playground model
@simple-playground-web/project	./packages/cores/project	Project model
@simple-playground-web/react	./packages/frameworks/react	The playground ui library of react framework
@simple-playground-web/dts-rollup	./packages/libs/dts-rollup	Collect all referenced _.d.ts files of _.ts entry files
@simple-playground-web/gen-template	./packages/libs/gen-template	Cli for generating template.json from a directory
@simple-playground-web/renderers	./packages/renderers	Renderers
@simple-playground-web/dom	./packages/utilities/dom	Dom utilities
@simple-playground-web/logger	./packages/utilities/logger	Logger utilities
@simple-playground-web/path	./packages/utilities/path	Path utilities for browser
@simple-playground-web/types	./packages/utilities/types	Common types
@simple-playground-web/scripts	./scripts	Internal scripts
template	./template	Template of website

Scripts

命令	描述	内容	运行方法
release	发布	scripts release	pnpm -w run release
test	测试	vitest	pnpm -w run test
dev	开发模式	pnpm --filter=website dev	pnpm -w run dev
postinstall	安装后执行的脚本	husky install	pnpm -w run postinstall
storybook	启动 storybook 开发服务器	pnpm --filter=storybook dev	pnpm -w run storybook

Frameworks

You can see examples folder for more info.

React

Installation

npm i @simple-playground-web/core @simple-playground-web/react

Usage

import { project } from "@simple-playground-web/core";
import { Playground } from "@simple-playground-web/react";
import "@simple-playground-web/react/dist/index.css";

project.setTemplate({
  files: {
    "/index.ts": "console.log('hello world');",
  },
  externals: {
    cjsCode: "",
  },
});

<Playground cwd="/" />;