@windwalker-io/unicorn-next 0.1.0

package/src/service/loader.ts

@@ -0,0 +1,152 @@
+import { Dictionary } from '../types';
+import { injectCssToDocument } from './';
+
+export function useScriptImport(src: string, attrs: Record<string, string> = {}): Promise<void> {
+  const script = document.createElement('script');
+  script.src = src;
+
+  for (const key in attrs) {
+    script.setAttribute(key, attrs[key]);
+  }
+
+  return new Promise((resolve, reject) => {
+    script.onload = () => {
+      resolve();
+      document.body.removeChild(script);
+    };
+    script.onerror = (e) => {
+      reject(e);
+      document.body.removeChild(script);
+    };
+
+    document.body.appendChild(script);
+  });
+}
+
+export function doImport<T = any>(src: string): Promise<T> {
+  return import(/* @vite-ignore */src);
+}
+
+export async function useImport(...src: any[]): Promise<any>;
+export async function useImport<T extends any[]>(...src: string[]): Promise<T>;
+export async function useImport<T = any>(src: string): Promise<{ default: T }>;
+export async function useImport<D = any, C = any>(src: string): Promise<{ default: D } & Dictionary<C>>;
+export async function useImport(...src: any[]): Promise<any> {
+  if (src.length === 1) {
+    return doImport(src[0]);
+  }
+
+  const promises: Promise<any>[] = [];
+
+  src.forEach((link) => {
+    promises.push(
+      link instanceof Promise ? link : doImport(link)
+    );
+  });
+
+  return Promise.all(promises);
+}
+
+export async function useSeriesImport(...src: any[]): Promise<any>;
+export async function useSeriesImport<T extends any[]>(...src: string[]): Promise<T>;
+export async function useSeriesImport<T = any>(src: string): Promise<{ default: T }>;
+export async function useSeriesImport<D = any, C = any>(src: string): Promise<{ default: D } & Dictionary<C>>;
+export async function useSeriesImport(...src: any[]): Promise<any> {
+  const modules: any[] = [];
+
+  for (const source of src) {
+    if (Array.isArray(source)) {
+      const m = await useImport(...source);
+      modules.push(m);
+
+      continue;
+    }
+
+    const m = await useImport(source);
+
+    modules.push(m);
+  }
+
+  return modules;
+}
+
+export async function useCssIncludes(...hrefs: string[]): Promise<void[]> {
+  const promises = hrefs.map((href) => {
+    href = resolveUrl(href);
+
+    return new Promise<void>((resolve, reject) => {
+      const link = document.createElement('link');
+      link.rel = 'stylesheet';
+      link.href = href;
+      link.onload = () => resolve();
+      link.onerror = (e) => reject(e);
+
+      document.head.appendChild(link);
+    });
+  });
+
+  return Promise.all(promises);
+}
+
+const importedSheets: Record<string, Promise<{ default: CSSStyleSheet }>> = {};
+
+export async function useCssImport(...hrefs: string[]): Promise<CSSStyleSheet[]> {
+  // Todo: Use `{ assert: { type: "css" }` after all browsers support it.
+  const modules = await Promise.all(
+    hrefs.map((href) => {
+      if (!importedSheets[href]) {
+        importedSheets[href] = simulateCssImport(href);
+      }
+
+      return importedSheets[href];
+    })
+  );
+  const styles = modules.map(module => module.default);
+
+  return injectCssToDocument(...styles);
+}
+
+async function simulateCssImport(href: string) {
+  href = resolveUrl(href);
+
+  const response = await fetch(href);
+  if (!response.ok) {
+    throw new Error(`Failed to load CSS: ${href}`);
+  }
+  const cssText = await response.text();
+
+  const sheet = new CSSStyleSheet();
+  await sheet.replace(cssText);
+  return { default: sheet };
+}
+
+let importMap: Record<string, string>;
+
+function parseImportMap() {
+  const importMapScript = document.querySelector('script[type="importmap"]');
+  if (importMapScript) {
+    try {
+      return JSON.parse(importMapScript.textContent || '{}').imports || {};
+    } catch (e) {
+      console.error('Failed to parse import map:', e);
+    }
+  }
+  return {};
+}
+
+function resolveUrl(specifier: string) {
+  importMap ??= parseImportMap();
+
+  for (const [prefix, target] of Object.entries(importMap)) {
+    if (specifier === prefix) {
+      return target;
+    }
+  }
+
+  for (const [prefix, target] of Object.entries(importMap)) {
+    if (specifier.startsWith(prefix)) {
+      return specifier.replace(prefix, target);
+    }
+  }
+  return specifier;
+}

package/src/service/router.ts

@@ -0,0 +1,118 @@
+
+import { data } from '../data';
+import { decode, encode } from 'qss';
+
+/**
+ * Add a route.
+ */
+export function addRoute(route: string, url: string) {
+  const routes = data('unicorn.routes') || {};
+  routes[route] = url;
+
+  data('unicorn.routes', routes);
+}
+
+/**
+ * Get route.
+ */
+export function route(route: string, query?: Record<string, any>): string {
+  const source = route;
+  const extract = extractRoute(source);
+  route = extract.route;
+  let path = extract.path;
+  const routes = data('unicorn.routes') || {};
+
+  let url = routes[route];
+
+  if (url == null) {
+    if (!route.startsWith('@')) {
+      route = '@' + route;
+    } else {
+      route = route.substring(1);
+    }
+  }
+
+  url = routes[route];
+
+  if (url == null) {
+    throw new Error(`Route: "${source}" not found`);
+  }
+
+  // Merge query
+  if (path) {
+    const { route: u1, path: u1q } = extractRoute(url, '?');
+    const { route: u2, path: u2q } = extractRoute(path, '?');
+
+    url = u1 + '/' + u2;
+
+    if (u1q || u2q) {
+      const q = [ u1q, u2q ].filter(u => u).join('&');
+      url += '?' + q;
+    }
+  }
+
+  return addQuery(url, query);
+}
+
+function extractRoute(route: string, sep: string = '/'): { path: string; route: string } {
+  if (route.indexOf(sep) === -1) {
+    return { route, path: '' }
+  }
+
+  const segments = route.split(sep);
+
+  route = segments.shift() || '';
+  const path = segments.join(sep);
+
+  return { route, path };
+}
+
+export function hasRoute(route: string): boolean {
+  return undefined !== data('unicorn.routes')[route];
+}
+
+export function addQuery(url: string, query?: Record<string, any>): string {
+  if (query == null) {
+    return url;
+  }
+
+  for (let k in query) {
+    const v = query[k];
+
+    const placeholder = `{${k}}`;
+
+    if (url.indexOf(placeholder) !== -1) {
+      url = url.replace(
+        new RegExp(`${placeholder}`, 'g'),
+        v
+      );
+      delete query[k];
+    }
+
+    const encodedPlaceholder = encodeURIComponent(`{${k}}`);
+
+    if (url.indexOf(encodedPlaceholder) !== -1) {
+      url = url.replace(
+        new RegExp(`${encodedPlaceholder}`, 'g'),
+        v
+      );
+      delete query[k];
+    }
+  }
+
+  if (Object.keys(query).length === 0) {
+    return url;
+  }
+
+  const queryString = encode(query);
+
+  return url + (/\?/.test(url) ? `&${queryString}` : `?${queryString}`);
+}
+
+export function parseQuery<T = Record<string, any>>(queryString: string): T {
+  return decode(queryString) as T;
+}
+
+export function buildQuery(query: Record<string, any>): string {
+  return encode(query);
+}