feat(up): wip playground impl; save pinceau-less version

Tahul · Oct 14, 2023 · 565dee2 · 565dee2
1 parent eae67bd
commit 565dee2
Show file tree

Hide file tree

Showing 29 changed files with 849 additions and 364 deletions.
diff --git a/integrations/repl/package.json b/integrations/repl/package.json
@@ -1,12 +1,12 @@
 {
-  "name": "@vue/repl",
+  "name": "@pinceau/repl",
   "type": "module",
   "version": "2.5.8",
   "description": "Pinceau component for editing Pinceau components.",
   "exports": {
     ".": {
       "types": "./dist/repl.d.ts",
-      "import": "./dist/vue-repl.js",
+      "import": "./dist/pinceau-repl.js",
       "require": "./dist/ssr-stub.js"
     },
     "./monaco-editor": {
@@ -18,7 +18,7 @@
     "./dist/style.css": "./dist/style.css"
   },
   "main": "dist/ssr-stub.js",
-  "module": "dist/vue-repl.js",
+  "module": "dist/pinceau-repl.js",
   "types": "dist/repl.d.ts",
   "files": [
     "dist"
@@ -38,13 +38,13 @@
     "@pinceau/palette": "workspace:*",
     "@pinceau/vue": "workspace:*",
     "@rollup/plugin-replace": "^5.0.3",
-    "@types/node": "^20.8.4",
+    "@types/node": "^20.8.5",
     "@vitejs/plugin-vue": "^4.4.0",
     "@volar/cdn": "~1.10.4",
     "@volar/language-server": "^1.10.4",
     "@volar/monaco": "~1.10.4",
     "@volar/typescript": "~1.10.4",
-    "@vue/language-service": "1.8.19",
+    "@vue/language-service": "1.8.6",
     "fflate": "^0.8.1",
     "monaco-editor": "^0.44.0",
     "monaco-editor-core": "^0.44.0",

diff --git a/integrations/repl/src/Logo full.svg b/integrations/repl/src/Logo full.svg
diff --git a/integrations/repl/src/components/Dropdown.vue b/integrations/repl/src/components/Dropdown.vue
@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <select :value="modelValue" @change="onChange">
+      <option v-for="option of options" :value="option.value">
+        {{  option.title  }}
+      </option>
+    </select>
+    <svg width="21" height="20" viewBox="0 0 21 20" fill="none">
+      <path d="M14.6666 7.64174C14.5104 7.48653 14.2992 7.39941 14.0791 7.39941C13.8589 7.39941 13.6477 7.48653 13.4916 7.64174L10.4999 10.5917L7.54992 7.64174C7.39378 7.48653 7.18257 7.39941 6.96242 7.39941C6.74226 7.39941 6.53105 7.48653 6.37492 7.64174C6.29681 7.71921 6.23481 7.81138 6.19251 7.91293C6.1502 8.01448 6.12842 8.1234 6.12842 8.23341C6.12842 8.34342 6.1502 8.45234 6.19251 8.55389C6.23481 8.65544 6.29681 8.74761 6.37492 8.82507L9.90825 12.3584C9.98572 12.4365 10.0779 12.4985 10.1794 12.5408C10.281 12.5831 10.3899 12.6049 10.4999 12.6049C10.6099 12.6049 10.7188 12.5831 10.8204 12.5408C10.9219 12.4985 11.0141 12.4365 11.0916 12.3584L14.6666 8.82507C14.7447 8.74761 14.8067 8.65544 14.849 8.55389C14.8913 8.45234 14.9131 8.34342 14.9131 8.23341C14.9131 8.1234 14.8913 8.01448 14.849 7.91293C14.8067 7.81138 14.7447 7.71921 14.6666 7.64174Z" fill="#D4D4D4"/>
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+type DropdownOption = {
+  value: string
+  title: string
+}
+
+withDefaults(
+  defineProps<{
+    options: DropdownOption[],
+    modelValue: string | undefined
+  }>(),
+  {
+    options: () => ([])
+  }
+)
+
+const emit = defineEmits(['update:modelValue'])
+
+function onChange(e: Event): void {
+  const target = e.target as HTMLSelectElement
+  emit('update:modelValue', target.value)
+}
+</script>
+
+
+<style lang="ts">
+styled({
+  position: 'relative',
+
+  select: {
+    paddingLeft: '$space.4',
+    paddingRight: '$space.8',
+    paddingTop: '$space.1',
+    paddingBottom: '$space.1',
+    backgroundColor: '$color.gray.8',
+    borderRadius: '$radii.xl',
+    appearance: 'none',
+    width: '100px'
+  },
+
+  svg: {
+    position: 'absolute',
+    right: '$space.1',
+    top: '$space.2'
+  }
+})
+</style>
diff --git a/integrations/repl/src/components/Icon.vue b/integrations/repl/src/components/Icon.vue
@@ -0,0 +1,12 @@
+<template>
+  <svg width="12" height="18" viewBox="0 0 12 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="Vector">
+      <path
+        d="M11.0329 16.5067C11.1344 16.4433 11.1947 16.3313 11.1947 16.2116V14.7914C11.1947 14.4828 10.8206 14.3148 10.5736 14.4999C9.24567 15.4944 7.59601 16.0835 5.80915 16.0835C4.02233 16.0835 2.3727 15.4944 1.04482 14.4999C0.797743 14.3149 0.423717 14.4828 0.423717 14.7914V16.2116C0.423717 16.3313 0.48395 16.4433 0.585507 16.5068C2.10077 17.4532 3.89145 18 5.80915 18C7.72689 18 9.5176 17.4532 11.0329 16.5067Z"
+        fill="#717175" />
+      <path
+        d="M2.72338 3.09549C-0.0521216 4.90428 -0.835108 8.61952 0.974533 11.3937C2.78417 14.1679 6.50117 14.9505 9.27667 13.1417C12.0522 11.333 12.8352 7.61771 11.0255 4.84351L11.0079 4.81654C10.605 4.1988 9.88582 3.8636 9.15336 3.95211L8.4972 4.03139C8.27805 4.05787 8.12499 3.81995 8.24004 3.63164L8.56787 3.09508C8.95703 2.45813 8.94516 1.6543 8.53734 1.02912L8.00465 0.212484C7.86339 -0.0040669 7.57324 -0.0651568 7.35659 0.0760352L2.72338 3.09549Z"
+        fill="#717175" />
+    </g>
+  </svg>
+</template>
diff --git a/integrations/repl/src/components/Logo.vue b/integrations/repl/src/components/Logo.vue
diff --git a/integrations/repl/src/components/Message.vue b/integrations/repl/src/components/Message.vue
@@ -69,7 +69,7 @@ css({
     left: '8px',
     right: '8px',
     zIndex: '10',
-    border: '2px solid transparent',
+    border: '1px solid transparent',
     borderRadius: '6px',
     fontFamily: 'var(--font-code)',
     whiteSpace: 'pre-wrap',

diff --git a/integrations/repl/src/components/Repl.vue b/integrations/repl/src/components/Repl.vue
@@ -1,25 +1,26 @@
 <script setup lang="ts">
 import { Pane, Splitpanes } from 'splitpanes'
 import 'splitpanes/dist/splitpanes.css'
-import { provide, ref, toRef } from 'vue'
+import { provide, ref, toRef, watch } from 'vue'
 import type { Store } from '../store'
 import { ReplStore } from '../store'
 import Output from './output/Output.vue'
 import type { EditorComponentType } from './editor/types'
 import EditorContainer from './editor/EditorContainer.vue'
-import FilesOutputContainer from './output/FilesOutputContainer.vue'
+import TopBar from './TopBar.vue'
 
 export interface Props {
   theme?: 'dark' | 'light'
   editor: EditorComponentType
   store?: Store
+  topBar?: boolean
+  compilerOptions?: any
   autoResize?: boolean
   showCompileOutput?: boolean
   showImportMap?: boolean
   showTsConfig?: boolean
   showTheme?: boolean
   clearConsole?: boolean
-  transformerOptions?: any
   layout?: 'horizontal' | 'vertical'
   ssr?: boolean
   previewOptions?: {
@@ -36,13 +37,15 @@ export interface Props {
 const props = withDefaults(defineProps<Props>(), {
   theme: 'light',
   store: () => new ReplStore(),
+  topBar: true,
   autoResize: true,
   showCompileOutput: true,
   showImportMap: true,
   showTsConfig: true,
-  shoTheme: true,
+  showTheme: true,
   clearConsole: true,
   ssr: false,
+  compilerOptions: () => ({}),
   previewOptions: () => ({
     headHTML: '',
     bodyHTML: '',
@@ -58,10 +61,10 @@ if (!props.editor) { throw new Error('The "editor" prop is now required.') }
 
 const outputRef = ref<InstanceType<typeof Output>>()
 const { store } = props
-const sfcOptions = (store.transformer.options = props.transformerOptions || {})
-if (!sfcOptions.script) { sfcOptions.script = {} }
+const compilerOptions = (store.transformer.compilerOptions = props.compilerOptions || {})
+if (!compilerOptions.script) { compilerOptions.script = {} }
 
-sfcOptions.script.fs = {
+compilerOptions.script.fs = {
   fileExists(file: string) {
     if (file.startsWith('/')) { file = file.slice(1) }
     return !!store.state.files[file]
@@ -82,6 +85,7 @@ provide('theme', toRef(props, 'showTheme'))
 provide('clear-console', toRef(props, 'clearConsole'))
 provide('preview-options', props.previewOptions)
 provide('theme', toRef(props, 'theme'))
+
 /**
  * Reload the preview iframe
  */
@@ -93,17 +97,11 @@ defineExpose({ reload })
 </script>
 
 <template>
-  <div class="pinceau-repl">
-    <Splitpanes>
+  <div :key="store.resetFlip.value" class="pinceau-repl-container">
+    <TopBar v-if="props.topBar" />
+    <Splitpanes :class="['pinceau-repl', { 'has-topbar': props.topBar }]">
       <Pane>
-        <Splitpanes horizontal>
-          <Pane>
-            <EditorContainer :editor-component="editor" />
-          </Pane>
-          <Pane size="0">
-            <FilesOutputContainer />
-          </Pane>
-        </Splitpanes>
+        <EditorContainer :editor-component="editor" />
       </Pane>
       <Pane>
         <Output
@@ -121,31 +119,47 @@ defineExpose({ reload })
 css({
   '@import': 'url(\'https://fonts.googleapis.com/css2?family=Onest:wght@400;700;900&display=swap\')',
 
-  '.pinceau-repl': {
+  '.pinceau-repl-container': {
     '--bg': '$color.white',
-    '--bg-soft': '#f8f8f8',
-    '--border': '#ddd',
-    '--text-light': '#888',
+    '--bg-soft': '$color.gray.1',
+    '--border': '$color.gray.2',
+    '--text-light': '$color.gray.9',
     '--font-code': '\'JetBrains Mono\', monospace',
     '--color-branding': '$color.red.5',
     '--color-branding-dark': '$color.blue.5',
     '--header-height': '$space.12',
+
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    color: '$color.gray.9'
+  },
+
+  $dark: {
+    '.pinceau-repl-container': {
+      '--bg': '$color.gray.9',
+      '--bg-soft': '$color.gray.9',
+      '--border': '$color.gray.8',
+      '--text-light': '$color.gray.1',
+      '--color-branding': '$color.red.6',
+      '--color-branding-dark': '$color.blue.6',
+      color: '$color.gray.1'
+    },
+  },
+
+  '.pinceau-repl': {
     'height': '100%',
     'margin': '0',
     'overflow': 'hidden',
     'fontSize': '12px',
     'fontFamily': '\'Onest\', sans-serif',
     'backgroundColor': 'var(--bg-soft)',
+    '&.has-topbar': {
+      'height': 'calc(100% - var(--header-height))',
+    },
   },
 
-  '.dark .pinceau-repl': {
-    '--bg': '$color.black',
-    '--bg-soft': '#242424',
-    '--border': '#383838',
-    '--text-light': '#aaa',
-    '--color-branding': '$color.red.6',
-    '--color-branding-dark': '$color.blue.6',
-  },
+  
 
   ':deep(button)': {
     border: 'none',