@lapikit/repl 0.0.1 → 0.0.2

package/dist/Button.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	let { children, ...rest } = $props();
+</script>
+
+<button {...rest}>
+	{@render children?.()}
+</button>
+
+<style>
+	button {
+		background: none;
+		border: none;
+		cursor: pointer;
+		display: flex;
+		align-self: center;
+		justify-content: center;
+		font-size: 0.875rem;
+		border-radius: 0.375rem;
+		transition: background-color 0.2s ease;
+		padding: 8px;
+		color: var(--repl-secondary);
+	}
+
+	button:hover {
+		color: var(--repl-primary);
+	}
+
+	button :global(svg) {
+		height: 20px;
+		width: 20px;
+	}
+</style>

package/dist/Button.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const Button: import("svelte").Component<{
+    children: any;
+} & Record<string, any>, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/Files.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import type { FilesProps } from './types.js';
+	import { dictionaryIcons } from './utils.js';
+
+	let { files, activeIndex = $bindable() }: FilesProps = $props();
+</script>
+
+{#if files && files.length > 1}
+	<div>
+		{#each files as file, index (index)}
+			<button class:active={activeIndex === index} onclick={() => (activeIndex = index)}>
+				{#if file.lang && dictionaryIcons[file.lang]}
+					<img src={dictionaryIcons[file.lang]} alt="{file.lang} icon" />
+				{/if}
+				<span>{file.name}</span>
+			</button>
+		{/each}
+	</div>
+
+	<hr />
+{/if}
+
+<style>
+	div {
+		display: flex;
+		gap: calc(var(--repl-spacing) * 2);
+		padding-left: calc(5 * var(--repl-spacing));
+		padding-right: calc(5 * var(--repl-spacing));
+		padding-block: calc(var(--repl-spacing) * 2);
+		overflow-x: auto;
+	}
+
+	button {
+		display: flex;
+		align-items: center;
+		gap: calc(var(--repl-spacing) * 2);
+		padding: calc(var(--repl-spacing) * 2) calc(var(--repl-spacing) * 3);
+		border-radius: 0.375rem;
+		font-size: 0.875rem;
+		transition: all 0.2s ease;
+		border: 1px solid transparent;
+		white-space: nowrap;
+	}
+
+	button img {
+		width: 16px;
+		height: 16px;
+	}
+
+	button:hover {
+		background-color: #f5f5f5;
+	}
+
+	button.active {
+		background-color: #f0f0f0;
+		border-color: #d0d0d0;
+	}
+
+	hr {
+		max-width: calc(100% - 4.5rem);
+		margin-inline-start: calc(4.5rem / 2);
+		display: block;
+		border: thin solid var(--repl-border-color);
+		margin-top: 0;
+		margin-bottom: 0;
+	}
+</style>

package/dist/Files.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { FilesProps } from './types.js';
+declare const Files: import("svelte").Component<FilesProps, {}, "activeIndex">;
+type Files = ReturnType<typeof Files>;
+export default Files;

package/dist/Repl.svelte

@@ -1,32 +1,28 @@
 <script lang="ts">
 	import { copyToClipboard } from './utils.js';
+	import { getHighlighterSingleton } from './shiki.js';
+	import type { FileItem, ReplProps } from './types.js';
 
-	import { Copy, Check, Code, Codesandbox, Moon, Sun } from '@lucide/svelte';
+	// components
+	import Toolbar from './Toolbar.svelte';
+	import Files from './Files.svelte';
 
-	import CodeIcon from './assets/languages/code.svg';
-	import JavaScriptIcon from './assets/languages/javascript.svg';
-	import TypeScriptIcon from './assets/languages/typescript.svg';
-	import SvelteIcon from './assets/languages/svelte.svg';
-	import CssIcon from './assets/languages/css.svg';
-	import HtmlIcon from './assets/languages/html.svg';
-	import { getHighlighterSingleton } from './shiki.js';
+	let { title, content, children, presentation }: ReplProps = $props();
 
-	interface FileItem {
-		name: string;
-		content: string;
-		lang?: string;
-	}
+	// refs
+	let ref: null | HTMLElement = $state(null);
 
-	let { title, content, children } = $props();
-	let codeHTML = $state('');
+	// states
+	let language = $state('javascript');
+
+	let modeState: 'code' | 'playground' | 'mixed' = $state('code');
 	let copyState = $state(false);
-	let viewMode = $state('editor');
-	let themeMode = $state('light');
+	let viewState: 'code' | 'preview' = $state('code');
+	let themeState: 'light' | 'dark' = $state('light');
 
-	let ref: null | HTMLElement = $state(null);
-	let typeContent = $state('code');
+	let codeHTML = $state('');
+	let activeFileIndex = $state(0);
 
-	// multiple content types
 	let files = $derived.by<FileItem[]>(() => {
 		if (typeof content === 'object' && content !== null && 'code' in content) {
 			return [
@@ -41,8 +37,14 @@
 		if (typeof content === 'object' && content !== null && !Array.isArray(content)) {
 			return Object.entries(content).map(([name, fileContent]) => ({
 				name,
-				content: typeof fileContent === 'string' ? fileContent : (fileContent as any).code || '',
-				lang: typeof fileContent === 'object' ? (fileContent as any).lang : 'javascript'
+				content:
+					typeof fileContent === 'string'
+						? fileContent
+						: (fileContent as Record<string, unknown>).code || '',
+				lang:
+					typeof fileContent === 'object'
+						? ((fileContent as Record<string, unknown>).lang as string)
+						: 'javascript'
 			}));
 		}
 
@@ -56,21 +58,23 @@
 
 		return [{ name: 'code', content: content || '', lang: 'javascript' }];
 	});
-
-	let activeFileIndex = $state(0);
 	let activeFile = $derived(files[activeFileIndex]);
-	let hasMultipleFiles = $derived(files.length > 1);
-
-	let iconMap = {
-		code: CodeIcon,
-		javascript: JavaScriptIcon,
-		typescript: TypeScriptIcon,
-		svelte: SvelteIcon,
-		css: CssIcon,
-		html: HtmlIcon
-	} as const;
 
-	let currentIcon = $derived(iconMap[typeContent as keyof typeof iconMap] || CodeIcon);
+	$effect.pre(() => {
+		if (children && content && !presentation) {
+			modeState = 'mixed';
+			viewState = 'preview';
+		} else if (presentation) {
+			modeState = 'mixed';
+			viewState = 'code';
+		} else if (children && !content) {
+			modeState = 'playground';
+			viewState = 'preview';
+		} else {
+			modeState = 'code';
+			viewState = 'code';
+		}
+	});
 
 	$effect(() => {
 		if (copyState) {
@@ -87,16 +91,16 @@
 
 	$effect(() => {
 		const file = activeFile;
-		const theme = themeMode;
+		const theme = themeState;
 
 		if (file?.content) {
 			(async () => {
-				console.log('Rendering file:', file);
 				const highlighter = await getHighlighterSingleton();
 
+				language = file.lang || 'javascript';
 				const html = highlighter.codeToHtml(file.content, {
 					theme: theme === 'light' ? 'github-light' : 'github-dark',
-					lang: file.lang || 'javascript'
+					lang: file.lang || language
 				});
 
 				codeHTML = html;
@@ -106,76 +110,32 @@
 </script>
 
 <div class="repl-container">
-	<div class="repl-toolbar">
-		<div class="repl-toolbar--title">
-			<img src={currentIcon} alt="{typeContent} icon" class="toolbar-icon" />
-			<span>{title || 'REPL Toolbar'}</span>
-		</div>
+	<Toolbar
+		{title}
+		{language}
+		{presentation}
+		bind:copyState
+		bind:viewState
+		bind:themeState
+		bind:modeState
+	/>
+
+	{#if modeState !== 'code'}
+		<hr />
+	{/if}
 
-		<div class="repl-toolbar--actions">
-			{#if viewMode !== 'editor'}
-				<button
-					class="repl-btn--icon"
-					onclick={() => (themeMode = themeMode === 'light' ? 'dark' : 'light')}
-					title="Toggle Theme"
-				>
-					{#if themeMode === 'light'}
-						<Moon class="toolbar-icon" />
-					{:else}
-						<Sun class="toolbar-icon" />
-					{/if}
-				</button>
-			{/if}
-			<button
-				class="repl-btn--icon"
-				title={viewMode === 'editor' ? 'Code' : 'Playground'}
-				onclick={() => (viewMode = viewMode === 'editor' ? 'playground' : 'editor')}
-			>
-				{#if viewMode === 'editor'}
-					<Code class="toolbar-icon" />
-				{:else}
-					<Codesandbox class="toolbar-icon" />
-				{/if}
-			</button>
-			<button
-				class="repl-btn--icon"
-				onclick={() => (copyState = true)}
-				title={copyState ? 'Copied!' : 'Copy'}
-			>
-				{#if copyState}
-					<Check class="toolbar-icon" />
-				{:else}
-					<Copy class="toolbar-icon" />
-				{/if}
-			</button>
+	{#if presentation}
+		<div class="repl-content">
+			<div>{@render children?.()}</div>
 		</div>
-	</div>
-
-	<hr />
 
-	{#if hasMultipleFiles && viewMode === 'editor'}
-		<div class="sub-toolbar">
-			{#each files as file, index (index)}
-				<button
-					class="file-tab"
-					class:active={activeFileIndex === index}
-					onclick={() => (activeFileIndex = index)}
-					title={file.name}
-				>
-					<img
-						src={iconMap[file.lang as keyof typeof iconMap] || CodeIcon}
-						alt="{file.lang} icon"
-						class="file-icon"
-					/>
-					<span>{file.name}</span>
-				</button>
-			{/each}
-		</div>
 		<hr />
 	{/if}
 
+	<Files {files} bind:activeIndex={activeFileIndex} />
+
 	<div class="repl-content">
-		{#if viewMode === 'editor'}
+		{#if viewState === 'code'}
 			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 			<div class="wrapper-highlight" bind:this={ref}>{@html codeHTML}</div>
 		{:else}
@@ -206,74 +166,6 @@
 		background-color: var(--repl-background) !important;
 	}
 
-	div.repl-toolbar {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: calc(var(--repl-spacing) * 3);
-		padding-left: calc(5 * var(--repl-spacing));
-		padding-right: calc(var(--repl-spacing) * 2);
-		padding-block: calc(var(--repl-spacing) * 1.5);
-		border-top-left-radius: var(--repl-radius);
-		border-top-right-radius: var(--repl-radius);
-		min-height: 36px;
-	}
-
-	div.repl-toolbar--actions {
-		display: flex;
-		align-items: center;
-		gap: calc(var(--repl-spacing) * 2);
-	}
-
-	.sub-toolbar button {
-	}
-
-	div button.repl-btn--icon {
-		background: none;
-		border: none;
-		cursor: pointer;
-		display: flex;
-		align-self: center;
-		justify-content: center;
-		font-size: 0.875rem;
-		border-radius: 0.375rem;
-		transition: background-color 0.2s ease;
-		padding: 8px;
-		color: var(--repl-secondary);
-	}
-
-	div button.repl-btn--icon:hover {
-		color: var(--repl-primary);
-	}
-
-	div button.repl-btn--icon :global(svg) {
-		height: 20px;
-		width: 20px;
-	}
-
-	.repl-toolbar--title {
-		display: flex;
-		align-items: center;
-		gap: calc(var(--repl-spacing) * 2);
-		font-weight: 600;
-		color: var(--repl-secondary);
-		max-width: 80%;
-		min-width: 0;
-	}
-
-	.repl-toolbar--title span {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	.repl-toolbar--title .toolbar-icon {
-		width: 20px;
-		height: 20px;
-		object-fit: contain;
-		flex-shrink: 0;
-	}
-
 	.repl-content {
 		display: flow-root;
 		margin-top: calc(var(--repl-spacing) * 0);
@@ -300,40 +192,4 @@
 		white-space: pre-wrap;
 		word-break: break-word;
 	}
-
-	.sub-toolbar {
-		display: flex;
-		gap: calc(var(--repl-spacing) * 2);
-		padding-left: calc(5 * var(--repl-spacing));
-		padding-right: calc(5 * var(--repl-spacing));
-		padding-block: calc(var(--repl-spacing) * 2);
-		overflow-x: auto;
-	}
-
-	.file-tab {
-		display: flex;
-		align-items: center;
-		gap: calc(var(--repl-spacing) * 2);
-		padding: calc(var(--repl-spacing) * 2) calc(var(--repl-spacing) * 3);
-		border-radius: 0.375rem;
-		font-size: 0.875rem;
-		transition: all 0.2s ease;
-		border: 1px solid transparent;
-		white-space: nowrap;
-	}
-
-	.file-tab:hover {
-		background-color: #f5f5f5;
-	}
-
-	.file-tab.active {
-		background-color: #f0f0f0;
-		border-color: #d0d0d0;
-	}
-
-	.file-icon {
-		width: 16px;
-		height: 16px;
-		object-fit: contain;
-	}
 </style>

package/dist/Repl.svelte.d.ts

@@ -1,7 +1,4 @@
-declare const Repl: import("svelte").Component<{
-    title: any;
-    content: any;
-    children: any;
-}, {}, "">;
+import type { ReplProps } from './types.js';
+declare const Repl: import("svelte").Component<ReplProps, {}, "">;
 type Repl = ReturnType<typeof Repl>;
 export default Repl;

package/dist/Toolbar.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	import type { ToolbarProps } from './types.js';
+	import Button from './Button.svelte';
+	import { dictionary } from './utils.js';
+	import { Copy, Check, Code, Codesandbox, Moon, Sun } from '@lucide/svelte';
+
+	let {
+		title,
+		language,
+		presentation,
+		copyState = $bindable(),
+		viewState = $bindable(),
+		themeState = $bindable(),
+		modeState = $bindable()
+	}: ToolbarProps = $props();
+
+	let languageKey = $derived(
+		Object.entries(dictionary).find(([, values]) => values.includes(language))?.[0] || language
+	);
+</script>
+
+<div class="lpk-repl--toolbar">
+	<div class="lpk-repl--toolbar-title">
+		{#if title}
+			<span>{title}</span>
+		{:else if language}
+			<span>{languageKey}</span>
+		{/if}
+	</div>
+
+	<div class="lpk-repl--toolbar-actions">
+		{#if (modeState !== 'code' && viewState === 'preview') || presentation}
+			<Button onclick={() => (themeState = themeState === 'light' ? 'dark' : 'light')}>
+				{#if themeState === 'light'}
+					<Moon />
+				{:else}
+					<Sun />
+				{/if}
+			</Button>
+		{/if}
+
+		{#if modeState === 'mixed' && !presentation}
+			<Button onclick={() => (viewState = viewState === 'code' ? 'preview' : 'code')}>
+				{#if viewState === 'code'}
+					<Code />
+				{:else}
+					<Codesandbox />
+				{/if}
+			</Button>
+		{/if}
+
+		{#if modeState !== 'playground'}
+			<Button onclick={() => (copyState = true)}>
+				{#if copyState}
+					<Check />
+				{:else}
+					<Copy />
+				{/if}
+			</Button>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.lpk-repl--toolbar {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: calc(var(--repl-spacing) * 3);
+		padding-left: calc(5 * var(--repl-spacing));
+		padding-right: calc(var(--repl-spacing) * 2);
+		padding-block: calc(var(--repl-spacing) * 1.5);
+		border-top-left-radius: var(--repl-radius);
+		border-top-right-radius: var(--repl-radius);
+		min-height: 36px;
+	}
+
+	.lpk-repl--toolbar .lpk-repl--toolbar-title {
+		display: flex;
+		align-items: center;
+		gap: calc(var(--repl-spacing) * 2);
+		font-weight: 600;
+		color: var(--repl-secondary);
+		max-width: 80%;
+		min-width: 0;
+	}
+
+	.lpk-repl--toolbar .lpk-repl--toolbar-actions {
+		display: flex;
+		align-items: center;
+		gap: calc(var(--repl-spacing) * 2);
+	}
+</style>

package/dist/Toolbar.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ToolbarProps } from './types.js';
+declare const Toolbar: import("svelte").Component<ToolbarProps, {}, "copyState" | "viewState" | "themeState" | "modeState">;
+type Toolbar = ReturnType<typeof Toolbar>;
+export default Toolbar;

package/dist/types.d.ts

@@ -0,0 +1,25 @@
+import type { Snippet } from 'svelte';
+export interface ReplProps {
+    title?: string;
+    content?: string | Record<string, string | Record<string, unknown>>;
+    children?: Snippet;
+    presentation?: boolean;
+}
+export interface ToolbarProps {
+    title?: string;
+    language: string;
+    copyState?: boolean;
+    presentation?: boolean;
+    viewState?: 'code' | 'preview';
+    themeState?: 'light' | 'dark';
+    modeState?: 'code' | 'playground' | 'mixed';
+}
+export interface FilesProps {
+    files?: FileItem[];
+    activeIndex: number;
+}
+export interface FileItem {
+    name: string;
+    content: string;
+    lang?: string;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils.d.ts

@@ -1 +1,7 @@
 export declare const copyToClipboard: (value: string) => void;
+export declare const dictionary: {
+    [key: string]: string[];
+};
+export declare const dictionaryIcons: {
+    [key: string]: string;
+};

package/dist/utils.js

@@ -1,3 +1,9 @@
+import javascript from './languages/javascript.svg';
+import typescript from './languages/typescript.svg';
+import svelte from './languages/svelte.svg';
+import css from './languages/css.svg';
+import html from './languages/html.svg';
+import shell from './languages/shell.svg';
 export const copyToClipboard = (value) => {
     if (navigator.clipboard && window.isSecureContext) {
         navigator.clipboard
@@ -28,3 +34,28 @@ export const copyToClipboard = (value) => {
         document.body.removeChild(zoneTexte);
     }
 };
+export const dictionary = {
+    javascript: ['js', 'javascript'],
+    typescript: ['ts', 'typescript'],
+    svelte: ['svelte', 'svelte.ts', 'svelte.js'],
+    css: ['css', 'scss', 'less'],
+    html: ['html', 'htm'],
+    json: ['json'],
+    shell: ['bash', 'sh', 'shell']
+};
+export const dictionaryIcons = {
+    js: javascript,
+    ts: typescript,
+    'svelte.ts': svelte,
+    'svelte.js': svelte,
+    svelte: svelte,
+    shell: shell,
+    bash: shell,
+    sh: shell,
+    css: css,
+    scss: css,
+    less: css,
+    html: html,
+    htm: html,
+    json: shell
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@lapikit/repl",
-	"version": "0.0.1",
+	"version": "0.0.2",
 	"license": "MIT",
 	"publishConfig": {
 		"access": "public"

package/dist/assets/icons/check.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>

package/dist/assets/icons/code.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-icon lucide-code"><path d="m16 18 6-6-6-6"/><path d="m8 6-6 6 6 6"/></svg>

package/dist/assets/icons/codesandbox.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-codesandbox-icon lucide-codesandbox"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="7.5 4.21 12 6.81 16.5 4.21"/><polyline points="7.5 19.79 7.5 14.6 3 12"/><polyline points="21 12 16.5 14.6 16.5 19.79"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" x2="12" y1="22.08" y2="12"/></svg>

package/dist/assets/icons/copy.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy-icon lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>