├── .babelrc
├── .gitignore
├── .prettierrc
├── README.md
├── package.json
├── playground
├── app.tsx
├── index.html
└── vite.config.js
├── pnpm-lock.yaml
├── rollup.config.js
├── src
└── solid-repl.tsx
└── tsconfig.json
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["babel-preset-solid", "@babel/preset-typescript"]
3 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | dist
2 | node_modules
3 | .parcel-cache
4 | .cache
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "arrowParens": "always",
3 | "bracketSpacing": true,
4 | "endOfLine": "lf",
5 | "htmlWhitespaceSensitivity": "ignore",
6 | "jsxSingleQuote": false,
7 | "printWidth": 80,
8 | "quoteProps": "as-needed",
9 | "semi": true,
10 | "singleQuote": true,
11 | "trailingComma": "all",
12 | "tabWidth": 2,
13 | "useTabs": false
14 | }
15 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | # Solid REPL
4 |
5 | > ## /!\ This repo. is temporarly innactive. All of the work around both the REPL and the playground is taking place over at [https://github.com/solidjs/solid-playground](https://github.com/solidjs/solid-playground)
6 |
7 | A re-usable [solid](https://github.com/ryansolid/solid) component that provides an embedable REPL.
8 |
9 | - [Solid REPL](#solid-repl)
10 | - [Usage](#usage)
11 | - [Installation](#installation)
12 | - [In practice](#in-practice)
13 | - [Options](#options)
14 | - [Repl options](#repl-options)
15 | - [ReplTab options](#repltab-options)
16 | - [Contributing](#contributing)
17 | - [Technical details](#technical-details)
18 | - [How does it work?](#how-does-it-work)
19 | - [TODOs](#todos)
20 | - [Credits](#credits)
21 |
22 | ## Usage
23 |
24 | [Demo available here](https://codesandbox.io/s/solid-repl-example-xr6de?file=/src/index.tsx)
25 |
26 | ### Installation
27 |
28 | ```bash
29 | # npm
30 | npm install solid-repl
31 |
32 | # pnpm
33 | pnpm add solid-repl
34 |
35 | # yarn
36 | yarn add solid-repl
37 | ```
38 |
39 | ### In practice
40 |
41 | In a nutshell this is how you'd use it:
42 |
43 | ```tsx
44 | import { Repl, ReplTab } from 'solid-repl';
45 | import { render } from 'solid-js/web';
46 |
47 | const App = () => {
48 | return (
49 |
55 |
56 | {`
57 | import { render } from 'solid-js/web';
58 | import { App } from './app.tsx';
59 |
60 | render(App, document.getElementById('app'));
61 | `}
62 |
63 |
64 | {'export const App = () => Hello world
'}
65 |
66 |
67 | );
68 | };
69 |
70 | render(App, document.getElementById('app')!);
71 | ```
72 |
73 | ### Options
74 |
75 | #### Repl options
76 |
77 | | name | required | type | default | description |
78 | | --------------- | -------- | ------- | --------------------------------- | --------------------------------- |
79 | | `baseUrl` | false | string | `https://playground.solidjs.com/` | The source of the iframe |
80 | | `height` | false | number | `250` | The height in pixel |
81 | | `withHeader` | false | boolean | `false` | Whether to show or not |
82 | | `isInteractive` | false | boolean | `false` | Whether it's interactive or not |
83 |
84 | #### ReplTab options
85 |
86 | | name | required | type | default | description |
87 | | ------ | -------- | ------ | ------- | --------------- |
88 | | `name` | true | string | - | Name of the tab |
89 |
90 | ## Contributing
91 |
92 | This project uses the [pnpm](https://pnpm.js.org/) package manager. You should install this one if you want to contribute.
93 | This project uses [prettier](https://prettier.io/) to format code. A `format` npm script can be used to format the code.
94 |
95 | In order to contribute you can :
96 |
97 | 1. Clone the reposotory: `git clone git@github.com:ryansolid/solid-repl.git`
98 | 2. Install the dependencies: `pnpm install`
99 | 3. Operate you changes: `pnpm test` will load a live server to preview your changes on [http://localhost:1234](http://localhost:1234)
100 | 4. (optional) Run `pnpm format` to format the code if you don't have that automatically in your IDE
101 |
102 | ## Technical details
103 |
104 | This package is a simple wrapper around the [solid playground](https://github.com/ryansolid/solid-playground) as an iframe.
105 | **The below information are related to the solid-playground of the iframe.**
106 |
107 | ### How does it work?
108 |
109 | Basically, each "tab" acts as a virtual file. This virtual file system is represented by a global array of tabs.
110 |
111 | On every tab source change, rollup parses all the file and create an ESM bundle. This ESM bundle is injected into an iframe with a `
11 |
12 |