Skip to content

Latest commit

 

History

History
60 lines (41 loc) · 1.9 KB

README.md

File metadata and controls

60 lines (41 loc) · 1.9 KB

Vite Plugin for Playground Elements

Configuration to allow working with the playground-elements using Vite.

From the docs, we need to add a new url for sandboxBaseUrl and also copy some files:

This repo will create a /sandbox/ context for development and will copy playground-elements/playground-service-worker.js and playground-elements/playground-service-worker-proxy.html to /sandbox/ folder for production build.

Install (not yet published)

Requires Vite 3.1+

npm i vite-plugin-playground-elements -D

# yarn
yarn add vite-plugin-playground-elements -D

# pnpm
pnpm add vite-plugin-playground-elements -D

Usage

// vite.config.js / vite.config.ts
import { VitePlaygroundElements } from 'vite-plugin-playground-elements'

export default {
  plugins: [
    VitePlaygroundElements(/* options */)
  ]
}

Check out the node type declarations types.ts to configure the plugin.

Check out the client type declarations client.d.ts for built-in client support:

  • virtual:pg-ide: virtual module to get IDE configuration configured in the plugin

Caveats

  • Don't use private window in Chrome, it will break the service worker

TODO

  • Add config (ProjectManifest) option to playground-ide and review if we need to remove any options (modified for example)
  • Add virtual for playground-project (??)
  • Add virtual for playground-tab-bar (??)
  • Add virtual for playground-preview (??)
  • Add virtual for playground-file-editor (??)
  • Add virtual for playground-code-editor (??)
  • Add virtual for playground-file-system-controls (??)
  • Add support for import map (??)

License

MIT License © 2022-PRESENT Joaquín Sánchez