GithubHelp home page GithubHelp logo

x-oss-byte / solid-playground Goto Github PK

View Code? Open in Web Editor NEW

This project forked from solidjs/solid-playground

0.0 0.0 1.0 10.93 MB

Quickly discover what the solid compiler will generate from your JSX template

Home Page: https://playground.solidjs.com

License: MIT License

JavaScript 1.45% TypeScript 97.30% CSS 0.63% HTML 0.62%

solid-playground's Introduction

Solid Playground

Solid Template Explorer

This is the source code of the solid playground website. Through it you can quickly discover what the solid compiler will generate from your JSX templates.

There are 3 modes available:

  • DOM: The classic SPA generation mechanism
  • SSR: The server side generation mechanism
  • HYDRATION: The client side generation for hydration

Getting up and running

This project is built using the pnpm package manager.

Once you got it up and running you can follow these steps the have a fully working environement:

# Clone the project
$ git clone https://github.com/solidjs/solid-playground

# cd into the project and install the dependencies
$ cd solid-playground && pnpm i

# Start the dev server, the address is available at http://localhost:5173
$ pnpm run dev

# Build the project
$ pnpm run build

โš ๏ธ Firefox doesn't work by default in development (pnpm dev) due to to vite's limitation with web worker. However it still works after build (pnpm build)

To develop on Firefox, ensure that dom.workers.modules.enabled is enabled in about:config

Credits / Technologies used

  • solid-js: The view library
  • @babel/standalone: The in-browser compiler. Solid compiler relies on babel
  • monaco: The in-browser code editor. This is the code editor that powers VS Code
  • Windi CSS: The CSS framework
  • vite: The module bundler
  • workbox: The service worker generator
  • pnpm: The package manager
  • lz-string: The string compression algorithm used to share REPL

solid-playground's People

Contributors

alexandre-mb-airweb avatar amoutonbrady avatar aquaductape avatar arindampal-0 avatar aylosrd avatar bigmistqke avatar boturyna avatar davedbase avatar edemaine avatar fiveawe avatar frenzzy avatar istareatscreens avatar joshwilsonvu avatar jutanium avatar m4rvr avatar milomg avatar nberlette avatar non25 avatar shannonrothe avatar spiffytech avatar surunzi avatar sytzez avatar tommypop2 avatar trivikr avatar trusktr avatar visualfanatic avatar yacinehmito avatar

Forkers

renovate-bot

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.