jsx-repl 0.0.1

package/dist/ssr-stub.js

@@ -0,0 +1 @@
+module.exports = {}

package/dist/vue-repl.css

@@ -0,0 +1,393 @@
+
+.split-pane[data-v-a59bbead] {
+  display: flex;
+  height: 100%;
+  position: relative;
+}
+.split-pane.dragging[data-v-a59bbead] {
+  cursor: ew-resize;
+}
+.dragging .left[data-v-a59bbead],
+.dragging .right[data-v-a59bbead] {
+  pointer-events: none;
+}
+.left[data-v-a59bbead],
+.right[data-v-a59bbead] {
+  position: relative;
+  height: 100%;
+}
+.view-size[data-v-a59bbead] {
+  position: absolute;
+  top: 40px;
+  left: 10px;
+  font-size: 12px;
+  color: var(--text-light);
+  z-index: 100;
+}
+.left[data-v-a59bbead] {
+  border-right: 1px solid var(--border);
+}
+.dragger[data-v-a59bbead] {
+  position: absolute;
+  z-index: 3;
+  top: 0;
+  bottom: 0;
+  right: -5px;
+  width: 10px;
+  cursor: ew-resize;
+}
+.toggler[data-v-a59bbead] {
+  display: none;
+  z-index: 3;
+  font-family: var(--font-code);
+  color: var(--text-light);
+  position: absolute;
+  left: 50%;
+  bottom: 20px;
+  background-color: var(--bg);
+  padding: 8px 12px;
+  border-radius: 8px;
+  transform: translateX(-50%);
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
+}
+.dark .toggler[data-v-a59bbead] {
+  background-color: var(--bg);
+}
+
+/* vertical */
+@media (min-width: 721px) {
+.split-pane.vertical[data-v-a59bbead] {
+    display: block;
+}
+.split-pane.vertical.dragging[data-v-a59bbead] {
+    cursor: ns-resize;
+}
+.vertical .dragger[data-v-a59bbead] {
+    top: auto;
+    height: 10px;
+    width: 100%;
+    left: 0;
+    right: 0;
+    bottom: -5px;
+    cursor: ns-resize;
+}
+.vertical .left[data-v-a59bbead],
+  .vertical .right[data-v-a59bbead] {
+    width: 100%;
+}
+.vertical .left[data-v-a59bbead] {
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+}
+}
+
+/* mobile */
+@media (max-width: 720px) {
+.left[data-v-a59bbead],
+  .right[data-v-a59bbead] {
+    position: absolute;
+    inset: 0;
+    width: auto !important;
+    height: auto !important;
+}
+.dragger[data-v-a59bbead] {
+    display: none;
+}
+.split-pane .toggler[data-v-a59bbead] {
+    display: block;
+}
+.split-pane .right[data-v-a59bbead] {
+    z-index: -1;
+    pointer-events: none;
+}
+.split-pane .left[data-v-a59bbead] {
+    z-index: 0;
+    pointer-events: all;
+}
+.split-pane.show-output .right[data-v-a59bbead] {
+    z-index: 0;
+    pointer-events: all;
+}
+.split-pane.show-output .left[data-v-a59bbead] {
+    z-index: -1;
+    pointer-events: none;
+}
+}
+
+.msg.err[data-v-024df844] {
+  --color: #f56c6c;
+  --bg-color: #fef0f0;
+}
+.dark .msg.err[data-v-024df844] {
+  --bg-color: #2b1d1d;
+}
+.msg.warn[data-v-024df844] {
+  --color: #e6a23c;
+  --bg-color: #fdf6ec;
+}
+.dark .msg.warn[data-v-024df844] {
+  --bg-color: #292218;
+}
+pre[data-v-024df844] {
+  margin: 0;
+  padding: 12px 20px;
+  overflow: auto;
+}
+.msg[data-v-024df844] {
+  position: absolute;
+  bottom: 0;
+  left: 8px;
+  right: 8px;
+  z-index: 20;
+  border: 2px solid transparent;
+  border-radius: 6px;
+  font-family: var(--font-code);
+  white-space: pre-wrap;
+  margin-bottom: 8px;
+  max-height: calc(100% - 300px);
+  min-height: 40px;
+  display: flex;
+  align-items: stretch;
+  color: var(--color);
+  border-color: var(--color);
+  background-color: var(--bg-color);
+}
+.dismiss[data-v-024df844] {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 18px;
+  height: 18px;
+  line-height: 18px;
+  border-radius: 9px;
+  text-align: center;
+  display: block;
+  font-size: 9px;
+  padding: 0;
+  color: var(--bg-color);
+  background-color: var(--color);
+}
+@media (max-width: 720px) {
+.dismiss[data-v-024df844] {
+    top: -9px;
+    right: -9px;
+}
+.msg[data-v-024df844] {
+    bottom: 50px;
+}
+}
+.fade-enter-active[data-v-024df844],
+.fade-leave-active[data-v-024df844] {
+  transition: all 0.15s ease-out;
+}
+.fade-enter-from[data-v-024df844],
+.fade-leave-to[data-v-024df844] {
+  opacity: 0;
+  transform: translate(0, 10px);
+}
+
+.iframe-container[data-v-39b455b8],
+.iframe-container[data-v-39b455b8] iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background-color: #fff;
+}
+.iframe-container.dark[data-v-39b455b8] iframe {
+  background-color: #1e1e1e;
+}
+
+.tab-buttons[data-v-8c91af99] {
+  display: flex;
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--border);
+  background-color: var(--bg);
+  min-height: var(--header-height);
+  overflow: hidden;
+}
+.tab-buttons button[data-v-8c91af99] {
+  padding: 0;
+  box-sizing: border-box;
+}
+.tab-buttons span[data-v-8c91af99] {
+  font-size: 13px;
+  font-family: var(--font-code);
+  text-transform: uppercase;
+  color: var(--text-light);
+  display: inline-block;
+  padding: 8px 16px 6px;
+  line-height: 20px;
+}
+button.active[data-v-8c91af99] {
+  color: var(--color-branding-dark);
+  border-bottom: 3px solid var(--color-branding-dark);
+}
+
+.file-selector[data-v-25e384ad] {
+  display: flex;
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--border);
+  background-color: var(--bg);
+  overflow-y: hidden;
+  overflow-x: auto;
+  white-space: nowrap;
+  position: relative;
+  height: var(--header-height);
+}
+.file-selector[data-v-25e384ad]::-webkit-scrollbar {
+  height: 1px;
+}
+.file-selector[data-v-25e384ad]::-webkit-scrollbar-track {
+  background-color: var(--border);
+}
+.file-selector[data-v-25e384ad]::-webkit-scrollbar-thumb {
+  background-color: var(--color-branding);
+}
+.file[data-v-25e384ad] {
+  position: relative;
+  display: inline-block;
+  font-size: 13px;
+  font-family: var(--font-code);
+  cursor: pointer;
+  color: var(--text-light);
+  box-sizing: border-box;
+}
+.file.active[data-v-25e384ad] {
+  color: var(--color-branding);
+  border-bottom: 3px solid var(--color-branding);
+  cursor: text;
+}
+.file span[data-v-25e384ad] {
+  display: inline-block;
+  padding: 8px 10px 6px;
+  line-height: 20px;
+}
+.file.pending span[data-v-25e384ad] {
+  min-width: 50px;
+  min-height: 34px;
+  padding-right: 32px;
+  background-color: rgba(200, 200, 200, 0.2);
+  color: transparent;
+}
+.file.pending input[data-v-25e384ad] {
+  position: absolute;
+  inset: 8px 7px auto;
+  font-size: 13px;
+  font-family: var(--font-code);
+  line-height: 20px;
+  outline: none;
+  border: none;
+  padding: 0 3px;
+  min-width: 1px;
+  color: inherit;
+  background-color: transparent;
+}
+.file .remove[data-v-25e384ad] {
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 12px;
+  cursor: pointer;
+  padding-left: 0;
+}
+.add[data-v-25e384ad] {
+  font-size: 18px;
+  font-family: var(--font-code);
+  color: #999;
+  vertical-align: middle;
+  margin-left: 6px;
+  position: relative;
+  top: -1px;
+}
+.add[data-v-25e384ad]:hover {
+  color: var(--color-branding);
+}
+.icon[data-v-25e384ad] {
+  margin-top: -1px;
+}
+
+.wrapper[data-v-17ef6099] {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+}
+.toggle[data-v-17ef6099] {
+  display: inline-block;
+  margin-left: 4px;
+  width: 32px;
+  height: 18px;
+  border-radius: 12px;
+  position: relative;
+  background-color: var(--border);
+}
+.indicator[data-v-17ef6099] {
+  font-size: 12px;
+  background-color: var(--text-light);
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  transition: transform ease-in-out 0.2s;
+  position: absolute;
+  left: 2px;
+  top: 2px;
+  color: var(--bg);
+  text-align: center;
+}
+.active .indicator[data-v-17ef6099] {
+  background-color: var(--color-branding);
+  transform: translateX(14px);
+  color: white;
+}
+
+.editor-container[data-v-b7163f23] {
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+.editor-floating[data-v-b7163f23] {
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+  z-index: 11;
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+  gap: 8px;
+  background-color: var(--bg);
+  color: var(--text-light);
+  padding: 8px;
+}
+
+.vue-repl {
+  --bg: #fff;
+  --bg-soft: #f8f8f8;
+  --border: #ddd;
+  --text-light: #888;
+  --font-code: Menlo, Monaco, Consolas, 'Courier New', monospace;
+  --color-branding: #42b883;
+  --color-branding-dark: #416f9c;
+  --header-height: 38px;
+
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+  font-size: 13px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  background-color: var(--bg-soft);
+}
+.dark .vue-repl {
+  --bg: #1a1a1a;
+  --bg-soft: #242424;
+  --border: #383838;
+  --text-light: #aaa;
+  --color-branding: #42d392;
+  --color-branding-dark: #89ddff;
+}
+.vue-repl button {
+  border: none;
+  outline: none;
+  cursor: pointer;
+  margin: 0;
+  background-color: transparent;
+}

package/dist/vue-repl.d.ts

@@ -0,0 +1,327 @@
+import { Component } from 'vue';
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { ComputedRef } from 'vue';
+import { CreateComponentPublicInstanceWithMixins } from 'vue';
+import { DefineComponent } from 'vue';
+import { editor } from 'monaco-editor-core';
+import { GlobalComponents } from 'vue';
+import { GlobalDirectives } from 'vue';
+import { version as languageToolsVersion } from '@ts-macro/language-plugin/package.json';
+import type * as monaco from 'monaco-editor-core';
+import { PublicProps } from 'vue';
+import { Ref } from 'vue';
+import { ShallowRef } from 'vue';
+import { ToRefs } from 'vue';
+import { UnwrapRef } from 'vue';
+
+declare type __VLS_Props = ReplProps;
+
+declare type __VLS_Props_2 = {
+    show: boolean;
+    ssr: boolean;
+};
+
+declare type __VLS_PublicProps = {
+    modelValue?: boolean;
+} & __VLS_Props;
+
+export declare function compileFile(store: Store, { filename, code, compiled }: File_2): Promise<(string | Error)[]>;
+
+declare type EditorComponentType = Component<EditorProps>;
+
+declare type EditorMode = 'js' | 'css' | 'ssr';
+
+declare interface EditorProps {
+    value: string;
+    filename: string;
+    readonly?: boolean;
+    mode?: EditorMode;
+}
+
+declare class File_2 {
+    filename: string;
+    code: string;
+    hidden: boolean;
+    compiled: {
+        js: string;
+        css: string;
+        ssr: string;
+    };
+    editorViewState: editor.ICodeEditorViewState | null;
+    constructor(filename: string, code?: string, hidden?: boolean);
+    get language(): "css" | "vue" | "typescript" | "html" | "javascript";
+}
+export { File_2 as File }
+
+export declare interface ImportMap {
+    imports?: Record<string, string | undefined>;
+    scopes?: Record<string, Record<string, string>>;
+}
+
+export { languageToolsVersion }
+
+export declare function mergeImportMap(a: ImportMap, b: ImportMap): ImportMap;
+
+export declare type OutputModes = EditorMode;
+
+export declare const Preview: DefineComponent<__VLS_Props_2, {
+reload: typeof reload_2;
+container: Readonly<ShallowRef<HTMLDivElement | null>>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_2> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
+container: HTMLDivElement;
+}, any>;
+
+/**
+ * Reload the preview iframe
+ */
+declare function reload(): void;
+
+/**
+ * Reload the preview iframe
+ */
+declare function reload_2(): void;
+
+export declare const Repl: DefineComponent<__VLS_PublicProps, {
+reload: typeof reload;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:modelValue": (value: boolean) => any;
+}, string, PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+ssr: boolean;
+layout: "horizontal" | "vertical";
+store: Store;
+splitPaneOptions: {
+codeTogglerText?: string;
+outputTogglerText?: string;
+};
+theme: "dark" | "light";
+previewTheme: boolean;
+autoResize: boolean;
+showCompileOutput: boolean;
+clearConsole: boolean;
+layoutReverse: boolean;
+previewOptions: {
+headHTML?: string;
+bodyHTML?: string;
+placeholderHTML?: string;
+customCode?: {
+importCode?: string;
+useCode?: string;
+};
+showRuntimeError?: boolean;
+showRuntimeWarning?: boolean;
+};
+editorOptions: {
+showErrorText?: string | false;
+virtualFilesText?: string | false;
+autoSaveText?: string | false;
+monacoOptions?: monaco.editor.IStandaloneEditorConstructionOptions;
+};
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+output: CreateComponentPublicInstanceWithMixins<Readonly<{
+editorComponent: EditorComponentType;
+showCompileOutput?: boolean;
+ssr: boolean;
+}> & Readonly<{}>, {
+reload: () => void;
+previewRef: Readonly<ShallowRef<CreateComponentPublicInstanceWithMixins<Readonly<{
+show: boolean;
+ssr: boolean;
+}> & Readonly<{}>, {
+reload: () => void;
+container: Readonly<ShallowRef<HTMLDivElement | null>>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, {}, false, {}, {}, GlobalComponents, GlobalDirectives, string, {
+container: HTMLDivElement;
+}, any, ComponentProvideOptions, {
+P: {};
+B: {};
+D: {};
+C: {};
+M: {};
+Defaults: {};
+}, Readonly<{
+show: boolean;
+ssr: boolean;
+}> & Readonly<{}>, {
+reload: () => void;
+container: Readonly<ShallowRef<HTMLDivElement | null>>;
+}, {}, {}, {}, {}> | null>>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, {}, false, {}, {}, GlobalComponents, GlobalDirectives, string, {
+preview: CreateComponentPublicInstanceWithMixins<Readonly<{
+show: boolean;
+ssr: boolean;
+}> & Readonly<{}>, {
+reload: () => void;
+container: Readonly<ShallowRef<HTMLDivElement | null>>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, {}, false, {}, {}, GlobalComponents, GlobalDirectives, string, {
+container: HTMLDivElement;
+}, any, ComponentProvideOptions, {
+P: {};
+B: {};
+D: {};
+C: {};
+M: {};
+Defaults: {};
+}, Readonly<{
+show: boolean;
+ssr: boolean;
+}> & Readonly<{}>, {
+reload: () => void;
+container: Readonly<ShallowRef<HTMLDivElement | null>>;
+}, {}, {}, {}, {}> | null;
+}, HTMLDivElement, ComponentProvideOptions, {
+P: {};
+B: {};
+D: {};
+C: {};
+M: {};
+Defaults: {};
+}, Readonly<{
+editorComponent: EditorComponentType;
+showCompileOutput?: boolean;
+ssr: boolean;
+}> & Readonly<{}>, {
+reload: () => void;
+previewRef: Readonly<ShallowRef<CreateComponentPublicInstanceWithMixins<Readonly<{
+show: boolean;
+ssr: boolean;
+}> & Readonly<{}>, {
+reload: () => void;
+container: Readonly<ShallowRef<HTMLDivElement | null>>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, {}, false, {}, {}, GlobalComponents, GlobalDirectives, string, {
+container: HTMLDivElement;
+}, any, ComponentProvideOptions, {
+P: {};
+B: {};
+D: {};
+C: {};
+M: {};
+Defaults: {};
+}, Readonly<{
+show: boolean;
+ssr: boolean;
+}> & Readonly<{}>, {
+reload: () => void;
+container: Readonly<ShallowRef<HTMLDivElement | null>>;
+}, {}, {}, {}, {}> | null>>;
+}, {}, {}, {}, {}> | null;
+}, HTMLDivElement>;
+
+export declare interface ReplProps {
+    theme?: 'dark' | 'light';
+    previewTheme?: boolean;
+    editor: EditorComponentType;
+    store?: Store;
+    autoResize?: boolean;
+    showCompileOutput?: boolean;
+    clearConsole?: boolean;
+    layout?: 'horizontal' | 'vertical';
+    layoutReverse?: boolean;
+    ssr?: boolean;
+    previewOptions?: {
+        headHTML?: string;
+        bodyHTML?: string;
+        placeholderHTML?: string;
+        customCode?: {
+            importCode?: string;
+            useCode?: string;
+        };
+        showRuntimeError?: boolean;
+        showRuntimeWarning?: boolean;
+    };
+    editorOptions?: {
+        showErrorText?: string | false;
+        virtualFilesText?: string | false;
+        autoSaveText?: string | false;
+        monacoOptions?: monaco.editor.IStandaloneEditorConstructionOptions;
+    };
+    splitPaneOptions?: {
+        codeTogglerText?: string;
+        outputTogglerText?: string;
+    };
+}
+
+export declare interface ReplStore extends UnwrapRef<StoreState> {
+    activeFile: File_2;
+    activeConfigFile: File_2;
+    viteConfig: ViteConfig;
+    init(): void;
+    setActive(filename: string): void;
+    addFile(filename: string | File_2): void;
+    deleteFile(filename: string): void;
+    renameFile(oldFilename: string, newFilename: string): void;
+    getImportMap(): ImportMap;
+    getTsConfig(): Record<string, any>;
+    getTsMacroConfig(): string;
+    serialize(): string;
+    deserialize(serializedState: string): void;
+    getFiles(): Record<string, {
+        code: string;
+        hidden?: boolean;
+    }>;
+    setFiles(newFiles: Record<string, string>, mainFile?: string): Promise<void>;
+}
+
+export declare type Store = Pick<ReplStore, 'files' | 'activeFile' | 'activeConfigFile' | 'mainFile' | 'errors' | 'showOutput' | 'outputMode' | 'vueVersion' | 'locale' | 'typescriptVersion' | 'dependencyVersion' | 'reloadLanguageTools' | 'init' | 'setActive' | 'addFile' | 'deleteFile' | 'renameFile' | 'getImportMap' | 'getTsConfig' | 'viteConfig' | 'getTsMacroConfig' | 'preset' | 'presets' | 'importMap'>;
+
+export declare type StoreState = ToRefs<{
+    files: Record<string, File_2>;
+    activeFilename: string;
+    activeConfigFilename: string;
+    mainFile: string;
+    builtinImportMap: ImportMap;
+    errors: (string | Error)[];
+    showOutput: boolean;
+    outputMode: OutputModes;
+    vueVersion: string | null;
+    importMap: ImportMap;
+    locale: string | undefined;
+    typescriptVersion: string;
+    /** \{ dependencyName: version \} */
+    dependencyVersion: Record<string, string>;
+    reloadLanguageTools?: (() => void) | undefined;
+    tsMacroConfigCode: string;
+    preset: string;
+    presets: Record<string, Template>;
+}>;
+
+declare type Template = {
+    indexHtml: string;
+    welcome: string;
+    new: string;
+    viteConfig: string;
+};
+
+export declare function useStore({ files, activeFilename, // set later
+    activeConfigFilename, // set later
+    mainFile, builtinImportMap, errors, showOutput, outputMode, vueVersion, locale, typescriptVersion, dependencyVersion, reloadLanguageTools, tsMacroConfigCode, preset, presets, }?: Partial<StoreState>, serializedState?: string): ReplStore;
+
+export declare function useVueImportMap(defaults?: {
+    runtimeDev?: string | (() => string);
+    runtimeProd?: string | (() => string);
+    serverRenderer?: string | (() => string);
+    vueVersion?: string | null;
+}): {
+    productionMode: Ref<boolean, boolean>;
+    importMap: ComputedRef<ImportMap>;
+    vueVersion: Ref<string | null, string | null>;
+    defaultVersion: string;
+};
+
+declare type ViteConfig = {
+    plugins: VitePlugin[];
+};
+
+declare type VitePlugin = {
+    name?: string;
+    resolveId?: (id: string) => string | null | undefined;
+    load?: (id: string) => string | null | undefined;
+    transform?: (code: string, id: string) => string | {
+        code: string;
+        map: any;
+    } | null | undefined;
+};
+
+export { }