allow loading ripple compiler & formatter from pkg.pr.new

Author: hatemhosny

scripts/build.js

@@ -238,6 +238,7 @@ const iifeBuild = () =>
       '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',

src/livecodes/formatter/format.worker.ts

@@ -1,6 +1,6 @@
 import { defaultConfig } from '../config/default-config';
 import { languages, parserPlugins, prettierUrl } from '../languages';
-import type { FormatFn, FormatterConfig, Language, Parser } from '../models';
+import type { Config, FormatFn, FormatterConfig, Language, Parser } from '../models';
 import type { FormatterMessage, FormatterMessageEvent } from './models';
 
 const worker: Worker = self as any;
@@ -9,6 +9,7 @@ declare const prettierPlugins: { [key: string]: { parsers: any } };
 declare const importScripts: (...args: string[]) => void;
 
 let baseUrl: string;
+let initialConfig: Config;
 const parsers: { [key: string]: Parser } = {};
 const plugins: { [key: string]: any } = {};
 const formatters: { [key: string]: FormatFn } = {};
@@ -94,15 +95,15 @@ async function loadParser(language: Language): Promise<Parser | undefined> {
   return parser;
 }
 
-const loadFormatter = (language: Language): FormatFn | undefined => {
+const loadFormatter = async (language: Language): Promise<FormatFn | undefined> => {
   if (language in formatters) {
     return formatters[language];
   }
 
   const formatter = getFormatter(language);
   if (!formatter) return;
 
-  formatters[language] = formatter.factory(baseUrl, language);
+  formatters[language] = await formatter.factory(baseUrl, language, initialConfig);
   return formatters[language];
 };
 
@@ -135,7 +136,7 @@ const format = async (
     return formatted || unFormatted;
   }
   if (getFormatter(language) != null) {
-    const formatFn = loadFormatter(language);
+    const formatFn = await loadFormatter(language);
     const result = await formatFn?.(value, cursorOffset);
     return result || unFormatted;
   }
@@ -148,7 +149,8 @@ worker.addEventListener(
     const message = event.data;
 
     if (message.type === 'init') {
-      baseUrl = message.baseUrl;
+      baseUrl = message.payload.baseUrl;
+      initialConfig = message.payload.config;
     }
 
     if (message.type === 'load') {

src/livecodes/formatter/formatter.ts

@@ -1,14 +1,14 @@
-import type { FormatFn, Language } from '../models';
+import type { Config, FormatFn, Language } from '../models';
 import { getAppCDN } from '../services/modules';
 import type { Formatter, FormatterMessage, FormatterMessageEvent } from './models';
 
-export const createFormatter = (baseUrl: string): Formatter => {
+export const createFormatter = (baseUrl: string, config: Config): Formatter => {
   let worker: Worker | undefined;
 
   const initWorker = () => {
     if (worker) return;
     worker = new Worker(baseUrl + '{{hash:format.worker.js}}' + '?appCDN=' + getAppCDN());
-    const configMessage: FormatterMessage = { type: 'init', baseUrl };
+    const configMessage: FormatterMessage = { type: 'init', payload: { baseUrl, config } };
     worker.postMessage(configMessage);
   };
 

src/livecodes/formatter/get-formatter.ts

@@ -8,13 +8,13 @@ export const getFormatter = (config: Config, baseUrl: string, lazy: boolean): Fo
   if (readonly || mode === 'codeblock' || mode === 'result') {
     return createFakeFormatter();
   } else if (lazy) {
-    return createLazyFormatter(baseUrl);
+    return createLazyFormatter(baseUrl, config);
   } else {
-    return createFormatter(baseUrl);
+    return createFormatter(baseUrl, config);
   }
 };
 
-const createLazyFormatter = (baseUrl: string) => {
+const createLazyFormatter = (baseUrl: string, config: Config) => {
   const fakeFormatter = createFakeFormatter();
   let formatter = fakeFormatter;
 
@@ -34,7 +34,7 @@ const createLazyFormatter = (baseUrl: string) => {
   };
 
   const loadFormatter = function () {
-    formatter = createFormatter(baseUrl);
+    formatter = createFormatter(baseUrl, config);
     lazyFormatter.load = formatter.load;
     lazyFormatter.getFormatFn = formatter.getFormatFn;
     lazyFormatter.destroy = formatter.destroy;

src/livecodes/formatter/models.ts

@@ -1,4 +1,4 @@
-import type { FormatFn, FormatterConfig, Language } from '../models';
+import type { Config, FormatFn, FormatterConfig, Language } from '../models';
 
 export interface Formatter {
   load: (languages: Language[]) => Promise<string>;
@@ -21,7 +21,10 @@ export type FormatterMessage =
 
 export interface InitMessage {
   type: 'init';
-  baseUrl: string;
+  payload: {
+    baseUrl: string;
+    config: Config;
+  };
 }
 
 export interface LoadMessage {

src/livecodes/languages/prettier.ts

@@ -1,4 +1,4 @@
-import { prettierBaseUrl, prettierPhpUrl, prettierRippleUrl, vendorsBaseUrl } from '../vendors';
+import { prettierBaseUrl, prettierPhpUrl, vendorsBaseUrl } from '../vendors';
 
 export const prettierUrl = prettierBaseUrl + 'standalone.js';
 export const parserPlugins = {
@@ -11,5 +11,4 @@ export const parserPlugins = {
   php: prettierPhpUrl,
   pug: vendorsBaseUrl + 'prettier/parser-pug.js',
   java: vendorsBaseUrl + 'prettier/parser-java.js',
-  ripple: prettierRippleUrl,
 };

src/livecodes/languages/ripple/lang-ripple-compiler.ts

@@ -3,28 +3,26 @@ import { createImportMap, replaceSFCImports } from '../../compiler/import-map';
 import { getCompileResult } from '../../compiler/utils';
 import type { CompilerFunction, Config } from '../../models';
 import { modulesService } from '../../services/modules';
+import { pkgInfoService } from '../../services/pkgInfo';
 import { getLanguageByAlias } from '../utils';
 
-const getLatestVersion = async () => {
-  const pkg = await fetch('https://data.jsdelivr.com/v1/packages/npm/ripple')
-    .then((res) => res.json())
-    .catch(() => ({}));
-  return pkg.tags?.latest || 'latest';
-};
-
 (self as any).createRippleCompiler = async (initialConfig: Config): Promise<CompilerFunction> => {
   const MAIN_FILE = '__LiveCodes_App__.ripple';
   let importedContent = '';
   let imports: Record<string, string> = {};
 
-  let version: string = initialConfig.customSettings.ripple?.version || (await getLatestVersion());
+  let version: string =
+    initialConfig.customSettings.ripple?.version ||
+    (await pkgInfoService.getPkgLatestVersion('ripple'));
   let compile: (code: string, filename: string) => Promise<{ js: { code: string }; css: string }>;
 
   const updateCompiler = async (currentVersion: string) => {
     if (typeof compile === 'function' && currentVersion === version) return;
-    const mod = await import(
-      /* @__PURE__ */ modulesService.getModuleUrl(`ripple@${currentVersion}/compiler`)
-    );
+    const modName =
+      currentVersion.startsWith('pr:ripple@') || currentVersion.startsWith('pkg.pr.new:ripple@')
+        ? `${currentVersion}/compiler` // 'pr:ripple@f8bdb34'
+        : `ripple@${currentVersion}/compiler`; // '0.2.25'
+    const mod = await import(modulesService.getModuleUrl(modName));
     compile = mod.compile;
     version = currentVersion;
   };
@@ -72,7 +70,7 @@ document.head.appendChild(styles);
 `;
 
     if (filename === MAIN_FILE) {
-      const moduleUrl = /* @__PURE__ */ modulesService.getModuleUrl(`ripple@${version}`);
+      const moduleUrl = modulesService.getModuleUrl(`ripple@${version}`);
       imports = {
         ...createImportMap(importedContent, config),
         ripple: moduleUrl,

src/livecodes/languages/ripple/lang-ripple-formatter.ts

@@ -0,0 +1,28 @@
+import { defaultConfig } from '../../config/default-config';
+import type { Config, FormatFn } from '../../models';
+import { modulesService } from '../../services/modules';
+import { pkgInfoService } from '../../services/pkgInfo';
+import { prettierEsmUrl, prettierRippleUrl } from '../../vendors';
+
+(self as any).createRippleFormatter = async (initialConfig: Config): Promise<FormatFn> => {
+  const version =
+    initialConfig.customSettings.ripple?.version ||
+    (await pkgInfoService.getPkgLatestVersion('ripple'));
+  const pluginUrl =
+    version.startsWith('pr:ripple@') || version.startsWith('pkg.pr.new:ripple@')
+      ? modulesService.getModuleUrl(version.replace('ripple', 'prettier-plugin-ripple'))
+      : prettierRippleUrl;
+
+  const [prettier, ripplePlugin] = await Promise.all([import(prettierEsmUrl), import(pluginUrl)]);
+  return async (code, cursorOffset, formatterConfig) =>
+    prettier.formatWithCursor(code, {
+      parser: 'ripple',
+      plugins: [ripplePlugin],
+      cursorOffset,
+      useTabs: formatterConfig?.useTabs ?? defaultConfig.useTabs,
+      tabWidth: formatterConfig?.tabSize ?? defaultConfig.tabSize,
+      semi: formatterConfig?.semicolons ?? defaultConfig.semicolons,
+      singleQuote: formatterConfig?.singleQuote ?? defaultConfig.singleQuote,
+      trailingComma: formatterConfig?.trailingComma === false ? 'none' : 'all',
+    });
+};

src/livecodes/languages/ripple/lang-ripple.ts

@@ -1,13 +1,14 @@
 import type { LanguageSpecs } from '../../models';
-import { parserPlugins } from '../prettier';
 
 export const ripple: LanguageSpecs = {
   name: 'ripple',
   title: 'Ripple',
   info: false,
-  parser: {
-    name: 'ripple',
-    pluginUrls: [parserPlugins.ripple],
+  formatter: {
+    factory: async (baseUrl, _language, config) => {
+      (self as any).importScripts(baseUrl + '{{hash:lang-ripple-formatter.js}}');
+      return (self as any).createRippleFormatter(config);
+    },
   },
   compiler: {
     factory: (config, baseUrl) => {

src/livecodes/services/pkgInfo.ts

@@ -217,9 +217,17 @@ const getPkgDefaultFiles = async (
   };
 };
 
+const getPkgLatestVersion = async (pkgName: string): Promise<string> => {
+  const pkg = await fetch(`${apiEndpoint}/packages/npm/${pkgName}`, { headers: jsDelivrHeaders })
+    .then((res) => res.json())
+    .catch(() => ({}));
+  return pkg.tags?.latest || 'latest';
+};
+
 export const pkgInfoService: CDNService = {
   search,
   getPkgInfo,
   getPkgFiles,
   getPkgDefaultFiles,
+  getPkgLatestVersion,
 };