live-codes · hatemhosny · Aug 29, 2025 · Aug 30, 2025 · Aug 31, 2025 · Sep 1, 2025
diff --git a/docs/docs/languages/ripple.mdx b/docs/docs/languages/ripple.mdx
diff --git a/docs/src/components/LanguageSliders.tsx b/docs/src/components/LanguageSliders.tsx
@@ -69,6 +69,7 @@ export default function Sliders() {
       { name: 'solid.tsx', title: 'Solid (TS)' },
       { name: 'riot', title: 'Riot.js' },
       { name: 'malina', title: 'Malina.js' },
+      { name: 'ripple', title: 'Ripple' },
       { name: 'coffeescript', title: 'CoffeeScript' },
       { name: 'livescript', title: 'LiveScript' },
       { name: 'civet', title: 'Civet' },

diff --git a/docs/src/components/TemplateList.tsx b/docs/src/components/TemplateList.tsx
@@ -23,6 +23,7 @@ const templates = [
   { name: 'astro', title: 'Astro Starter', thumbnail: 'astro.svg' },
   { name: 'riot', title: 'Riot.js Starter', thumbnail: 'riot.svg' },
   { name: 'malina', title: 'Malina.js Starter', thumbnail: 'malina.svg' },
+  { name: 'ripple', title: 'Ripple Starter', thumbnail: 'ripple-0.png' },
   { name: 'jquery', title: 'jQuery Starter', thumbnail: 'jquery.svg' },
   { name: 'backbone', title: 'Backbone Starter', thumbnail: 'backbone.svg' },
   { name: 'knockout', title: 'Knockout Starter', thumbnail: 'knockout.svg' },

diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -32,6 +32,7 @@ export default [
       '**/.jest',
       '**/.storybook',
       'functions/vendors',
+      'src/livecodes/editor/monaco/languages/monaco-lang-ripple.ts',
     ],
   },
   ...fixupConfigRules(

diff --git a/scripts/build.js b/scripts/build.js
@@ -160,6 +160,7 @@ const esmBuild = () =>
       'editor/monaco/languages/monaco-lang-astro.ts',
       'editor/monaco/languages/monaco-lang-clio.ts',
       'editor/monaco/languages/monaco-lang-imba.ts',
+      'editor/monaco/languages/monaco-lang-ripple.ts',
       // 'editor/monaco/languages/monaco-lang-sql.ts',
       'editor/monaco/languages/monaco-lang-wat.ts',
       'editor/codemirror/codemirror.ts',
@@ -237,6 +238,8 @@ const iifeBuild = () =>
       'languages/python-wasm/lang-python-wasm-script.ts',
       'languages/rescript/lang-rescript-formatter.ts',
       'languages/riot/lang-riot-compiler.ts',
+      'languages/ripple/lang-ripple-compiler.ts',
+      'languages/ripple/lang-ripple-formatter.ts',
       'languages/ruby-wasm/lang-ruby-wasm-script.ts',
       'languages/scss/lang-scss-compiler.ts',
       'languages/solid/lang-solid-compiler.ts',

diff --git a/src/livecodes/UI/command-menu-actions.ts b/src/livecodes/UI/command-menu-actions.ts
@@ -266,6 +266,7 @@ export const getCommandMenuActions = ({
         'preact',
         'svelte',
         'solid',
+        'ripple',
         'lit',
         'stencil',
         'mdx',

diff --git a/src/livecodes/assets/templates/ripple.png b/src/livecodes/assets/templates/ripple.png
diff --git a/src/livecodes/compiler/import-map.ts b/src/livecodes/compiler/import-map.ts
@@ -144,6 +144,14 @@ export const isScriptImport = (mod: string) =>
       mod.toLowerCase().endsWith('.vue') ||
       mod.toLowerCase().endsWith('.svelte')));
 
+const isStyleImport = (mod: string) =>
+  mod.toLowerCase().startsWith('./style') ||
+  mod.toLowerCase().endsWith('.css') ||
+  mod.toLowerCase().endsWith('.scss') ||
+  mod.toLowerCase().endsWith('.sass') ||
+  mod.toLowerCase().endsWith('.less') ||
+  mod.toLowerCase().endsWith('.styl');
+
 const modulesCache: Record<string, string> = {};
 const fetchModule = async (mod: string) => {
   if (modulesCache[mod]) {
@@ -176,7 +184,7 @@ export const replaceSFCImports = async (
   const isExtensionless = (mod: string) =>
     mod.startsWith('.') && !mod.split('/')[mod.split('/').length - 1].includes('.');
   const sfcImports = getImports(code).filter(
-    (mod) => isSfc(mod) || isExtensionless(mod) || mod.startsWith('.'),
+    (mod) => !isStyleImport(mod) && (isSfc(mod) || isExtensionless(mod) || mod.startsWith('.')),
   );
   const projectImportMap = {
     ...config.imports,

diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
@@ -1526,7 +1526,11 @@ const applyConfig = async (newConfig: Partial<Config>, reload = false) => {
       ...getFormatterConfig(currentConfig),
     };
     for (const key in editorConfig) {
-      if ((editorConfig as any)[key] !== (currentEditorConfig as any)[key]) {
+      if (
+        (editorConfig as any)[key] != null &&
+        (editorConfig as any)[key] !== (currentEditorConfig as any)[key] &&
+        !key.includes('theme')
+      ) {
         shouldReloadEditors = true;
         break;
       }