{"_id":"@babytian/openinula-repl-next","name":"@babytian/openinula-repl-next","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@babytian/openinula-repl-next","private":false,"version":"0.0.1","type":"module","main":"dist/main.js","types":"dist/main.d.ts","sideEffects":["**/*.css"],"scripts":{"dev":"vite","build":"vite build","build:app":"vite build --config vite.app.config.ts","lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","preview":"vite preview","test":"vitest"},"devDependencies":{"@rollup/plugin-replace":"^5.0.5","@types/node":"^20.8.10","@types/react":"^18.2.35","@types/react-dom":"^18.2.14","@typescript-eslint/eslint-plugin":"^6.9.1","@typescript-eslint/parser":"^6.9.1","@vitejs/plugin-react":"^4.1.1","autoprefixer":"^10.4.16","eslint":"^8.53.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.4","glob":"^10.3.10","postcss":"^8.4.32","shiki":"^1.18.0","tailwindcss":"^3.3.6","typescript":"^5.2.2","vite":"^5.0.2","vite-plugin-dts":"^3.6.3","vite-plugin-lib-inject-css":"^1.3.0"},"dependencies":{"@babel/generator":"^7.23.6","@babel/standalone":"^7.23.6","@radix-ui/react-collapsible":"^1.0.3","@radix-ui/react-icons":"^1.3.0","@radix-ui/react-navigation-menu":"^1.2.0","@radix-ui/react-scroll-area":"^1.1.0","@radix-ui/react-select":"^2.0.0","@radix-ui/react-slot":"^1.0.2","@radix-ui/react-tabs":"^1.0.4","@types/babel__standalone":"^7.1.7","class-variance-authority":"^0.7.0","classnames":"^2.3.2","clsx":"^2.1.0","fflate":"^0.8.1","gogocode":"^1.0.55","lucide-react":"^0.316.0","mermaid":"^10.9.1","monaco-editor":"^0.45.0","react-split-pane":"^0.1.92","sucrase":"^3.35.0","tailwind-merge":"^2.2.1","tailwindcss-animate":"^1.0.7","vitest":"^1.1.3"},"_id":"@babytian/openinula-repl-next@0.0.1","gitHead":"873ede75d24adb52eb5606b2dbd6e79769da2082","description":"> \"读取-求值-输出\"循环（英語：Read-Eval-Print Loop，简称REPL），也被称做交互式顶层构件","_nodeVersion":"24.1.0","_npmVersion":"11.3.0","dist":{"integrity":"sha512-gd6pf7Z+W8GxkGNenQC6dDlZJ1g6sArzCRv93eptPEbSz4s1CL/YhRLEtSuhpmLQN9Ekn12X4xDPB+NYE1hqEg==","shasum":"0854d14c8e9e199ed4db66c551e75ad1f222b531","tarball":"https://registry.npmjs.org/@babytian/openinula-repl-next/-/openinula-repl-next-0.0.1.tgz","fileCount":41,"unpackedSize":26165115,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCgihBZYl+fDWmIViqfdwAUbFb77GYZE5IvXCUapyqGBgIgfn2lMp8idrQmqFfitxgAKWMHRjPvA4A5yT0ikJPCLmc="}]},"_npmUser":{"name":"babytian_qaq","email":"2413915435@qq.com"},"directories":{},"maintainers":[{"name":"babytian_qaq","email":"2413915435@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/openinula-repl-next_0.0.1_1756643970254_0.7125819890474971"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-31T12:39:30.170Z","0.0.1":"2025-08-31T12:39:30.533Z","modified":"2025-08-31T12:39:30.760Z"},"maintainers":[{"name":"babytian_qaq","email":"2413915435@qq.com"}],"description":"> \"读取-求值-输出\"循环（英語：Read-Eval-Print Loop，简称REPL），也被称做交互式顶层构件","readme":"# openinula-repl-next\r\n\r\n> \"读取-求值-输出\"循环（英語：Read-Eval-Print Loop，简称REPL），也被称做交互式顶层构件\r\n\r\n本组件是提供一个 关于`openinula`的 交互式编程环境组件\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm i openinula-repl\r\n```\r\n\r\n## Usage\r\n\r\n``` jsx\r\nfunction App() {\r\n  return (\r\n    <Repl\r\n      name=\"inula-playground\"\r\n      split={{ split: 'vertical' }}\r\n    >\r\n      <Editor />\r\n      <Viewer />\r\n    </Repl>\r\n  );\r\n}\r\n```\r\n\r\n## 自定义演示示例\r\n\r\n您可以为Repl或Editor组件提供自定义的演示示例：\r\n当前支持导入Preview、SourceMap、Output、Components组件，Viewer是对这四个的整合，同时生成导航栏，可按需导入\r\n```jsx\r\nimport { Repl, Editor, Preview, Output, SourceMap, Components, Viewer } from 'openinula-repl-next'\r\n```\r\n\r\n### 在Repl组件级别使用\r\n\r\n```jsx\r\nimport { Repl } from 'openinula-repl';\r\nimport type { DemoItem } from 'openinula-repl';\r\n\r\n// 自定义基础演示\r\nconst customBasicDemos: DemoItem[] = [\r\n  {\r\n    concept: \"自定义Hello World\",\r\n    emoji: \"🌍\",\r\n    description: \"一个自定义的Hello World示例\",\r\n    code: `\r\nimport { createSignal } from 'openinula';\r\n\r\nfunction App() {\r\n  const [message] = createSignal('Hello from Custom Demo!');\r\n  \r\n  return (\r\n    <div>\r\n      <h1>{message()}</h1>\r\n      <p>这是一个自定义的基础演示示例</p>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default App;\r\n    `.trim()\r\n  }\r\n];\r\n\r\n// 自定义高级演示\r\nconst customAdvancedDemos: DemoItem[] = [\r\n  {\r\n    concept: \"自定义Context\",\r\n    emoji: \"📦\",\r\n    description: \"一个自定义的Context示例\",\r\n    code: `\r\nimport { createContext, useContext, createSignal } from 'openinula';\r\n\r\nconst ThemeContext = createContext();\r\n\r\nfunction ThemeProvider({ children }) {\r\n  const [theme, setTheme] = createSignal('light');\r\n  \r\n  return (\r\n    <ThemeContext.Provider value={{ theme: theme(), setTheme }}>\r\n      {children}\r\n    </ThemeContext.Provider>\r\n  );\r\n}\r\n\r\nfunction App() {\r\n  return (\r\n    <ThemeProvider>\r\n      <div>\r\n        <h1>自定义Context示例</h1>\r\n      </div>\r\n    </ThemeProvider>\r\n  );\r\n}\r\n\r\nexport default App;\r\n    `.trim()\r\n  }\r\n];\r\n\r\nfunction App() {\r\n  return (\r\n    <Repl \r\n      name=\"custom-demo-playground\"\r\n      advancedDemos={customAdvancedDemos}\r\n      basicDemos={customBasicDemos}\r\n    >\r\n      <Editor />\r\n      <Viewer />\r\n    </Repl>\r\n  );\r\n}\r\n```\r\n\r\n### 在Editor组件级别使用\r\n\r\n```jsx\r\nimport { Repl, Editor } from 'openinula-repl';\r\nimport type { DemoItem } from 'openinula-repl';\r\n\r\n// 自定义演示数组...\r\n\r\nfunction App() {\r\n  return (\r\n    <Repl name=\"custom-demo-playground\">\r\n      <Editor \r\n        advancedDemos={customAdvancedDemos}\r\n        basicDemos={customBasicDemos}\r\n      />\r\n      <Viewer />\r\n    </Repl>\r\n  );\r\n}\r\n```\r\n\r\n## API\r\n\r\n|属性|说明|类型|默认值|\r\n|---|---|---|---|\r\n|name|repl的名称|string||\r\n|split|设置编辑器和查看器的布局|SplitPaneProps||\r\n|className|自定义类名|string||\r\n|code|初始代码|string||\r\n|defaultCode|默认代码|string||\r\n|importMap|import map配置|string||\r\n|placeHolder|编辑器placeholder|string||\r\n|enableStorage|是否启用本地存储|boolean||\r\n|children|子组件|InulaNode|Editor 和 Viewer|\r\n|advancedDemos|自定义高级演示数组|DemoItem[]|默认高级演示|\r\n|basicDemos|自定义基础演示数组|DemoItem[]|默认基础演示|\r\n\r\n### Editor组件额外属性\r\n\r\n| 属性          | 说明                 | 类型                | 默认值         |\r\n| ------------- | -------------------- | ------------------- | -------------- |\r\n| darkTheme     | 是否使用深色主题     | boolean             | false          |\r\n| className     | 自定义类名           | string              |                |\r\n| Menu          | 自定义菜单组件       | React.ComponentType | `暂存 bug，不建议使用` |\r\n| advancedDemos | 自定义高级演示数组   | DemoItem[]          | 默认高级演示   |\r\n| basicDemos    | 自定义基础演示数组   | DemoItem[]          | 默认基础演示   |\r\n\r\n\r\n### DemoItem类型\r\n\r\n```typescript\r\ninterface DemoItem {\r\n  concept: string;    // 演示概念名称\r\n  emoji: string;      // 演示图标\r\n  description: string; // 演示描述\r\n  code: string;       // 演示代码\r\n}\r\n```\r\n","readmeFilename":"README.md","_rev":"1-57ae2fc4cad0148f160dd9b2051eeb25"}