From bd86b9532a2d9bd66076b652d1757a3b054822c7 Mon Sep 17 00:00:00 2001
From: baiwusanyu-c <740132583@qq.com>
Date: Mon, 13 Nov 2023 15:36:25 +0800
Subject: [PATCH 1/2] feat: repl supports custom element styles

---
 src/Repl.vue     |  4 ++--
 src/store.ts     |  6 +++++-
 src/transform.ts | 51 +++++++++++++++++++++++++++++++++++++++---------
 3 files changed, 49 insertions(+), 12 deletions(-)

diff --git a/src/Repl.vue b/src/Repl.vue
index 9f6c6386..10cbce0a 100644
--- a/src/Repl.vue
+++ b/src/Repl.vue
@@ -75,8 +75,8 @@ sfcOptions.script.fs = {
 
 store.init()
 
-const editorSlotName = computed(() => props.layoutReverse ? 'right' : 'left')
-const outputSlotName = computed(() => props.layoutReverse ? 'left' : 'right')
+const editorSlotName = computed(() => (props.layoutReverse ? 'right' : 'left'))
+const outputSlotName = computed(() => (props.layoutReverse ? 'left' : 'right'))
 
 provide('store', store)
 provide('autoresize', props.autoResize)
diff --git a/src/store.ts b/src/store.ts
index d9b8d143..8d9268f1 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -115,6 +115,7 @@ export interface Store {
   reloadLanguageTools?: undefined | (() => void)
   initialShowOutput: boolean
   initialOutputMode: OutputModes
+  customElement: boolean | string | RegExp | (string | RegExp)[]
 }
 
 export interface StoreOptions {
@@ -126,6 +127,7 @@ export interface StoreOptions {
   defaultVueRuntimeURL?: string
   defaultVueRuntimeProdURL?: string
   defaultVueServerRendererURL?: string
+  customElement?: boolean | string | RegExp | (string | RegExp)[]
 }
 
 export class ReplStore implements Store {
@@ -137,12 +139,12 @@ export class ReplStore implements Store {
   initialShowOutput: boolean
   initialOutputMode: OutputModes
   reloadLanguageTools: undefined | (() => void)
+  customElement: boolean | string | RegExp | (string | RegExp)[]
 
   private defaultVueRuntimeDevURL: string
   private defaultVueRuntimeProdURL: string
   private defaultVueServerRendererURL: string
   private pendingCompiler: Promise<any> | null = null
-
   constructor({
     serializedState = '',
     defaultVueRuntimeURL = `https://cdn.jsdelivr.net/npm/@vue/runtime-dom@${version}/dist/runtime-dom.esm-browser.js`,
@@ -151,6 +153,7 @@ export class ReplStore implements Store {
     showOutput = false,
     outputMode = 'preview',
     productionMode = false,
+    customElement = /\.ce\.vue$/,
   }: StoreOptions = {}) {
     const files: StoreState['files'] = {}
 
@@ -168,6 +171,7 @@ export class ReplStore implements Store {
     this.defaultVueRuntimeProdURL = defaultVueRuntimeProdURL
     this.defaultVueServerRendererURL = defaultVueServerRendererURL
     this.initialShowOutput = showOutput
+    this.customElement = customElement
     this.initialOutputMode = outputMode as OutputModes
 
     let mainFile = defaultMainFile
diff --git a/src/transform.ts b/src/transform.ts
index cb896898..328a87ff 100644
--- a/src/transform.ts
+++ b/src/transform.ts
@@ -167,17 +167,33 @@ export async function compileFile(
     )
   }
 
-  if (clientCode || ssrCode) {
-    appendSharedCode(
-      `\n${COMP_IDENTIFIER}.__file = ${JSON.stringify(filename)}` +
-        `\nexport default ${COMP_IDENTIFIER}`
-    )
-    compiled.js = clientCode.trimStart()
-    compiled.ssr = ssrCode.trimStart()
+  // styles
+  const ceFilter = store.customElement
+  function isCustomElement(filters: typeof ceFilter): boolean {
+    if (typeof filters === 'boolean') {
+      return filters
+    }
+
+    if (typeof filters === 'string') {
+      return filters.includes(filename)
+    } else if (
+      !Array.isArray(filters) &&
+      Object.prototype.toString.call(filters) === '[object RegExp]'
+    ) {
+      return filters.test(filename)
+    }
+
+    if (Array.isArray(filters)) {
+      return filters.some((filter) => {
+        return isCustomElement(filter)
+      })
+    }
+    return false
   }
+  let isCE = isCustomElement(ceFilter)
 
-  // styles
   let css = ''
+  let styles: string[] = []
   for (const style of descriptor.styles) {
     if (style.module) {
       return [`<style module> is not supported in the playground.`]
@@ -199,13 +215,30 @@ export async function compileFile(
       }
       // proceed even if css compile errors
     } else {
-      css += styleResult.code + '\n'
+      isCE ? styles.push(styleResult.code) : (css += styleResult.code + '\n')
     }
   }
   if (css) {
     compiled.css = css.trim()
   } else {
     compiled.css = '/* No <style> tags present */'
+    isCE
+      ? (compiled.css =
+          '/* The component style of the custom element will be compiled into the component object */')
+      : (compiled.css = '/* No <style> tags present */')
+  }
+
+  if (clientCode || ssrCode) {
+    const ceStyles = isCE
+      ? `\n${COMP_IDENTIFIER}.styles = ${JSON.stringify(styles)}`
+      : ''
+    appendSharedCode(
+      `\n${COMP_IDENTIFIER}.__file = ${JSON.stringify(filename)}` +
+        ceStyles +
+        `\nexport default ${COMP_IDENTIFIER}`
+    )
+    compiled.js = clientCode.trimStart()
+    compiled.ssr = ssrCode.trimStart()
   }
 
   return []

From 0fa35e09a4d0a036421cd732a76fce1ec31fad74 Mon Sep 17 00:00:00 2001
From: baiwusanyu-c <740132583@qq.com>
Date: Mon, 13 Nov 2023 16:54:11 +0800
Subject: [PATCH 2/2] chore: updated code

---
 src/Repl.vue     | 4 ++--
 src/store.ts     | 1 +
 src/transform.ts | 7 ++-----
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/Repl.vue b/src/Repl.vue
index 10cbce0a..9f6c6386 100644
--- a/src/Repl.vue
+++ b/src/Repl.vue
@@ -75,8 +75,8 @@ sfcOptions.script.fs = {
 
 store.init()
 
-const editorSlotName = computed(() => (props.layoutReverse ? 'right' : 'left'))
-const outputSlotName = computed(() => (props.layoutReverse ? 'left' : 'right'))
+const editorSlotName = computed(() => props.layoutReverse ? 'right' : 'left')
+const outputSlotName = computed(() => props.layoutReverse ? 'left' : 'right')
 
 provide('store', store)
 provide('autoresize', props.autoResize)
diff --git a/src/store.ts b/src/store.ts
index 8d9268f1..adccc7f8 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -145,6 +145,7 @@ export class ReplStore implements Store {
   private defaultVueRuntimeProdURL: string
   private defaultVueServerRendererURL: string
   private pendingCompiler: Promise<any> | null = null
+
   constructor({
     serializedState = '',
     defaultVueRuntimeURL = `https://cdn.jsdelivr.net/npm/@vue/runtime-dom@${version}/dist/runtime-dom.esm-browser.js`,
diff --git a/src/transform.ts b/src/transform.ts
index 328a87ff..8a71af71 100644
--- a/src/transform.ts
+++ b/src/transform.ts
@@ -221,11 +221,8 @@ export async function compileFile(
   if (css) {
     compiled.css = css.trim()
   } else {
-    compiled.css = '/* No <style> tags present */'
-    isCE
-      ? (compiled.css =
-          '/* The component style of the custom element will be compiled into the component object */')
-      : (compiled.css = '/* No <style> tags present */')
+    compiled.css = isCE ?  (compiled.css = '/* The component style of the custom element will be compiled into the component object */')
+      : ('/* No <style> tags present */')
   }
 
   if (clientCode || ssrCode) {