jsx-repl 0.0.1 → 0.0.4

package/dist/vue-repl.css

@@ -1,393 +0,0 @@
-
-.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

@@ -1,327 +0,0 @@
-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 { }