@fragments-sdk/cli 0.4.0 → 0.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fragments-sdk/cli",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "CLI, MCP server, and dev tools for Fragments design system",
   "type": "module",
   "bin": {
@@ -100,6 +100,7 @@
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",
+    "lint": "eslint src",
     "test": "vitest run",
     "typecheck": "tsc --noEmit",
     "clean": "rm -rf dist"

package/src/core/parser.ts

@@ -408,6 +408,51 @@ function extractVariants(
   return variants;
 }
 
+/**
+ * Remove common leading whitespace from all lines (dedent).
+ * This handles template literals and JSX that have extra indentation from code formatting.
+ *
+ * Special handling: If the first line has no indentation (common after .trim()),
+ * we calculate minimum indent from subsequent lines only.
+ */
+function dedent(str: string): string {
+  const lines = str.split('\n');
+
+  if (lines.length <= 1) {
+    return str;
+  }
+
+  // Check if first line has no indentation
+  const firstLineIndent = lines[0].match(/^(\s*)/)?.[1].length ?? 0;
+  const startIndex = firstLineIndent === 0 ? 1 : 0;
+
+  // Find the minimum indentation (ignoring empty lines)
+  let minIndent = Infinity;
+  for (let i = startIndex; i < lines.length; i++) {
+    const line = lines[i];
+    if (line.trim() === '') continue;
+    const match = line.match(/^(\s*)/);
+    if (match) {
+      minIndent = Math.min(minIndent, match[1].length);
+    }
+  }
+
+  // If no indentation found, return as-is
+  if (minIndent === Infinity || minIndent === 0) {
+    return str;
+  }
+
+  // Remove the common indentation from all lines (except first if it had no indent)
+  return lines
+    .map((line, index) => {
+      if (index === 0 && firstLineIndent === 0) {
+        return line; // Keep first line as-is
+      }
+      return line.slice(minIndent);
+    })
+    .join('\n');
+}
+
 /**
  * Extract the code from a render function.
  */
@@ -428,6 +473,9 @@ function extractRenderCode(
       code = code.slice(1, -1).trim();
     }
 
+    // Dedent the code to remove common leading whitespace
+    code = dedent(code);
+
     return code;
   }
 

package/src/core/storyAdapter.ts

@@ -9,7 +9,7 @@
  */
 
 import { createElement, type ComponentType, type ReactNode } from "react";
-import { toId, storyNameFromExport, isExportStory } from "@storybook/csf";
+import { toId, storyNameFromExport, isExportStory } from "./storybook-csf.js";
 import type {
   SegmentDefinition,
   SegmentMeta,

package/src/core/storybook-csf.ts

@@ -0,0 +1,11 @@
+import {
+  toId as storybookToId,
+  storyNameFromExport as storybookStoryNameFromExport,
+  isExportStory as storybookIsExportStory,
+} from "@storybook/csf";
+
+export const toId: typeof storybookToId = (...args) => storybookToId(...args);
+export const storyNameFromExport: typeof storybookStoryNameFromExport = (...args) =>
+  storybookStoryNameFromExport(...args);
+export const isExportStory: typeof storybookIsExportStory = (...args) =>
+  storybookIsExportStory(...args);

package/src/core/types.ts

@@ -5,7 +5,7 @@ import type { ComponentType, ReactNode, JSX } from "react";
  * This type is intentionally broad to support various React component patterns
  * including FC, forwardRef, memo, and class components across different React versions.
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+ 
 export type SegmentComponent<TProps = any> =
   | ComponentType<TProps>
   | ((props: TProps) => ReactNode | JSX.Element | null);

package/src/mcp/__tests__/findFragmentsJson.test.ts

@@ -0,0 +1,308 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { mkdirSync, writeFileSync, rmSync, realpathSync, symlinkSync } from 'node:fs';
+import { join } from 'node:path';
+import { tmpdir } from 'node:os';
+import { findFragmentsJson } from '../server.js';
+
+/**
+ * Creates a temporary directory tree for testing findFragmentsJson.
+ * Uses realpathSync to normalize macOS /var -> /private/var symlinks,
+ * ensuring path comparisons work reliably.
+ */
+function createTmpDir(): string {
+  const raw = join(tmpdir(), `fragments-test-${Date.now()}-${Math.random().toString(36).slice(2)}`);
+  mkdirSync(raw, { recursive: true });
+  return realpathSync(raw);
+}
+
+function writeJson(path: string, data: unknown): void {
+  writeFileSync(path, JSON.stringify(data));
+}
+
+describe('findFragmentsJson', () => {
+  let root: string;
+
+  beforeEach(() => {
+    root = createTmpDir();
+  });
+
+  afterEach(() => {
+    rmSync(root, { recursive: true, force: true });
+  });
+
+  describe('Phase 1: walk upward (library author flow)', () => {
+    it('finds fragments.json in the start directory', () => {
+      writeFileSync(join(root, 'fragments.json'), '{}');
+
+      const result = findFragmentsJson(root);
+      expect(result).toEqual([join(root, 'fragments.json')]);
+    });
+
+    it('finds fragments.json in a parent directory', () => {
+      const sub = join(root, 'packages', 'app');
+      mkdirSync(sub, { recursive: true });
+      writeFileSync(join(root, 'fragments.json'), '{}');
+
+      const result = findFragmentsJson(sub);
+      expect(result).toEqual([join(root, 'fragments.json')]);
+    });
+
+    it('returns empty array when no fragments.json exists anywhere', () => {
+      const sub = join(root, 'some', 'deep', 'path');
+      mkdirSync(sub, { recursive: true });
+
+      const result = findFragmentsJson(sub);
+      expect(result).toEqual([]);
+    });
+  });
+
+  describe('Phase 2: resolve deps with "fragments" field', () => {
+    it('finds fragments.json via dependency with "fragments" field', () => {
+      const depDir = join(root, 'node_modules', 'my-ui-lib');
+      mkdirSync(depDir, { recursive: true });
+
+      writeJson(join(root, 'package.json'), {
+        dependencies: { 'my-ui-lib': '^1.0.0' },
+      });
+      writeJson(join(depDir, 'package.json'), {
+        name: 'my-ui-lib',
+        fragments: 'fragments.json',
+      });
+      writeFileSync(join(depDir, 'fragments.json'), '{}');
+
+      const result = findFragmentsJson(root);
+      expect(result.length).toBe(1);
+      expect(result[0]).toBe(join(depDir, 'fragments.json'));
+    });
+
+    it('resolves custom fragments path from dependency', () => {
+      const depDir = join(root, 'node_modules', 'my-ui-lib');
+      mkdirSync(join(depDir, 'dist'), { recursive: true });
+
+      writeJson(join(root, 'package.json'), {
+        dependencies: { 'my-ui-lib': '^1.0.0' },
+      });
+      writeJson(join(depDir, 'package.json'), {
+        name: 'my-ui-lib',
+        fragments: 'dist/fragments.json',
+      });
+      writeFileSync(join(depDir, 'dist', 'fragments.json'), '{}');
+
+      const result = findFragmentsJson(root);
+      expect(result.length).toBe(1);
+      expect(result[0]).toBe(join(depDir, 'dist', 'fragments.json'));
+    });
+
+    it('finds fragments.json from devDependencies', () => {
+      const depDir = join(root, 'node_modules', 'my-ui-lib');
+      mkdirSync(depDir, { recursive: true });
+
+      writeJson(join(root, 'package.json'), {
+        devDependencies: { 'my-ui-lib': '^1.0.0' },
+      });
+      writeJson(join(depDir, 'package.json'), {
+        name: 'my-ui-lib',
+        fragments: 'fragments.json',
+      });
+      writeFileSync(join(depDir, 'fragments.json'), '{}');
+
+      const result = findFragmentsJson(root);
+      expect(result.length).toBe(1);
+      expect(result[0]).toBe(join(depDir, 'fragments.json'));
+    });
+
+    it('skips dependencies without "fragments" field', () => {
+      const depDir = join(root, 'node_modules', 'react');
+      mkdirSync(depDir, { recursive: true });
+
+      writeJson(join(root, 'package.json'), {
+        dependencies: { react: '^18.0.0' },
+      });
+      writeJson(join(depDir, 'package.json'), {
+        name: 'react',
+      });
+
+      const result = findFragmentsJson(root);
+      expect(result).toEqual([]);
+    });
+
+    it('skips dependency when fragments file does not exist', () => {
+      const depDir = join(root, 'node_modules', 'my-ui-lib');
+      mkdirSync(depDir, { recursive: true });
+
+      writeJson(join(root, 'package.json'), {
+        dependencies: { 'my-ui-lib': '^1.0.0' },
+      });
+      writeJson(join(depDir, 'package.json'), {
+        name: 'my-ui-lib',
+        fragments: 'fragments.json',
+      });
+      // Note: fragments.json not created
+
+      const result = findFragmentsJson(root);
+      expect(result).toEqual([]);
+    });
+
+    it('skips unresolvable dependencies gracefully', () => {
+      writeJson(join(root, 'package.json'), {
+        dependencies: { 'nonexistent-package': '^1.0.0' },
+      });
+
+      const result = findFragmentsJson(root);
+      expect(result).toEqual([]);
+    });
+
+    it('handles project with no package.json', () => {
+      const result = findFragmentsJson(root);
+      expect(result).toEqual([]);
+    });
+  });
+
+  describe('symlink resolution (pnpm-style)', () => {
+    it('follows symlinks to find fragments.json', () => {
+      // Simulate pnpm layout: real package in .pnpm, symlink in node_modules
+      const realDir = join(root, '.pnpm', 'my-ui-lib@1.0.0', 'node_modules', 'my-ui-lib');
+      const symlinkDir = join(root, 'node_modules', 'my-ui-lib');
+
+      mkdirSync(realDir, { recursive: true });
+      mkdirSync(join(root, 'node_modules'), { recursive: true });
+
+      writeJson(join(realDir, 'package.json'), {
+        name: 'my-ui-lib',
+        fragments: 'fragments.json',
+      });
+      writeFileSync(join(realDir, 'fragments.json'), '{}');
+
+      // Create symlink: node_modules/my-ui-lib -> .pnpm/.../my-ui-lib
+      symlinkSync(realDir, symlinkDir, 'dir');
+
+      writeJson(join(root, 'package.json'), {
+        dependencies: { 'my-ui-lib': '^1.0.0' },
+      });
+
+      const result = findFragmentsJson(root);
+      expect(result.length).toBe(1);
+      // require.resolve follows the symlink to the real path
+      expect(result[0]).toBe(join(realDir, 'fragments.json'));
+    });
+  });
+
+  describe('hoisted dependencies', () => {
+    it('finds fragments.json from a hoisted parent node_modules', () => {
+      // Monorepo layout: deps hoisted to root, app is in packages/app
+      const appDir = join(root, 'packages', 'app');
+      const hoistedDep = join(root, 'node_modules', 'my-ui-lib');
+
+      mkdirSync(appDir, { recursive: true });
+      mkdirSync(hoistedDep, { recursive: true });
+
+      writeJson(join(appDir, 'package.json'), {
+        dependencies: { 'my-ui-lib': '^1.0.0' },
+      });
+      writeJson(join(hoistedDep, 'package.json'), {
+        name: 'my-ui-lib',
+        fragments: 'fragments.json',
+      });
+      writeFileSync(join(hoistedDep, 'fragments.json'), '{}');
+
+      // createRequire resolves up the directory tree, so this should work
+      const result = findFragmentsJson(appDir);
+      expect(result.length).toBe(1);
+      expect(result[0]).toBe(join(hoistedDep, 'fragments.json'));
+    });
+  });
+
+  describe('deduplication', () => {
+    it('returns both local and dep fragments when they are different files', () => {
+      // fragments.json in root (found by walk-up) AND dep has its own
+      writeFileSync(join(root, 'fragments.json'), '{}');
+
+      const depDir = join(root, 'node_modules', 'my-ui-lib');
+      mkdirSync(depDir, { recursive: true });
+      writeJson(join(root, 'package.json'), {
+        dependencies: { 'my-ui-lib': '^1.0.0' },
+      });
+      writeJson(join(depDir, 'package.json'), {
+        name: 'my-ui-lib',
+        fragments: 'fragments.json',
+      });
+      writeFileSync(join(depDir, 'fragments.json'), '{}');
+
+      const result = findFragmentsJson(root);
+      // Walk-up finds root/fragments.json, dep resolution finds dep/fragments.json
+      expect(result.length).toBe(2);
+      expect(result).toContain(join(root, 'fragments.json'));
+      expect(result).toContain(join(depDir, 'fragments.json'));
+    });
+  });
+
+  describe('multiple dependencies', () => {
+    it('finds fragments.json from multiple dependencies', () => {
+      const dep1 = join(root, 'node_modules', 'ui-lib-a');
+      const dep2 = join(root, 'node_modules', 'ui-lib-b');
+      mkdirSync(dep1, { recursive: true });
+      mkdirSync(dep2, { recursive: true });
+
+      writeJson(join(root, 'package.json'), {
+        dependencies: { 'ui-lib-a': '^1.0.0' },
+        devDependencies: { 'ui-lib-b': '^2.0.0' },
+      });
+      writeJson(join(dep1, 'package.json'), {
+        name: 'ui-lib-a',
+        fragments: 'fragments.json',
+      });
+      writeFileSync(join(dep1, 'fragments.json'), '{}');
+      writeJson(join(dep2, 'package.json'), {
+        name: 'ui-lib-b',
+        fragments: 'fragments.json',
+      });
+      writeFileSync(join(dep2, 'fragments.json'), '{}');
+
+      const result = findFragmentsJson(root);
+      expect(result.length).toBe(2);
+      expect(result).toContain(join(dep1, 'fragments.json'));
+      expect(result).toContain(join(dep2, 'fragments.json'));
+    });
+
+    it('only includes deps that have "fragments" field', () => {
+      const uiLib = join(root, 'node_modules', 'ui-lib');
+      const react = join(root, 'node_modules', 'react');
+      mkdirSync(uiLib, { recursive: true });
+      mkdirSync(react, { recursive: true });
+
+      writeJson(join(root, 'package.json'), {
+        dependencies: { react: '^18.0.0', 'ui-lib': '^1.0.0' },
+      });
+      writeJson(join(react, 'package.json'), { name: 'react' });
+      writeJson(join(uiLib, 'package.json'), {
+        name: 'ui-lib',
+        fragments: 'fragments.json',
+      });
+      writeFileSync(join(uiLib, 'fragments.json'), '{}');
+
+      const result = findFragmentsJson(root);
+      expect(result.length).toBe(1);
+      expect(result[0]).toBe(join(uiLib, 'fragments.json'));
+    });
+  });
+
+  describe('scoped packages', () => {
+    it('resolves scoped package names like @scope/ui', () => {
+      const depDir = join(root, 'node_modules', '@my-scope', 'ui');
+      mkdirSync(depDir, { recursive: true });
+
+      writeJson(join(root, 'package.json'), {
+        dependencies: { '@my-scope/ui': '^1.0.0' },
+      });
+      writeJson(join(depDir, 'package.json'), {
+        name: '@my-scope/ui',
+        fragments: 'fragments.json',
+      });
+      writeFileSync(join(depDir, 'fragments.json'), '{}');
+
+      const result = findFragmentsJson(root);
+      expect(result.length).toBe(1);
+      expect(result[0]).toBe(join(depDir, 'fragments.json'));
+    });
+  });
+});

package/src/mcp/server.ts

@@ -32,6 +32,7 @@ async function getService(): Promise<ServiceModule> {
 import { readFile } from 'node:fs/promises';
 import { existsSync, readFileSync } from 'node:fs';
 import { join, dirname, resolve } from 'node:path';
+import { createRequire } from 'node:module';
 import { projectFields } from './utils.js';
 
 /**
@@ -65,6 +66,63 @@ function filterPlaceholders(items: string[] | undefined): string[] {
   );
 }
 
+/**
+ * Find fragments.json files:
+ * 1. Walk up from startDir (for library authors with a local build)
+ * 2. Read package.json deps and resolve packages with a "fragments" field
+ *
+ * Uses Node.js module resolution (createRequire) to handle all package
+ * managers: pnpm symlinks, yarn PnP, monorepo hoisting, etc.
+ */
+export function findFragmentsJson(startDir: string): string[] {
+  const found: string[] = [];
+  const resolvedStart = resolve(startDir);
+
+  // 1. Walk upward from startDir (library author flow)
+  let dir = resolvedStart;
+  while (true) {
+    const candidate = join(dir, BRAND.outFile);
+    if (existsSync(candidate)) {
+      found.push(candidate);
+      break;
+    }
+    const parent = dirname(dir);
+    if (parent === dir) break;
+    dir = parent;
+  }
+
+  // 2. Read package.json and resolve deps with "fragments" field
+  const pkgJsonPath = join(resolvedStart, 'package.json');
+  if (existsSync(pkgJsonPath)) {
+    try {
+      const pkgJson = JSON.parse(readFileSync(pkgJsonPath, 'utf-8'));
+      const allDeps = {
+        ...pkgJson.dependencies,
+        ...pkgJson.devDependencies,
+      };
+      const localRequire = createRequire(join(resolvedStart, 'noop.js'));
+      for (const depName of Object.keys(allDeps)) {
+        try {
+          const depPkgPath = localRequire.resolve(`${depName}/package.json`);
+          const depPkg = JSON.parse(readFileSync(depPkgPath, 'utf-8'));
+          if (depPkg.fragments) {
+            const fragmentsPath = join(dirname(depPkgPath), depPkg.fragments);
+            if (existsSync(fragmentsPath) && !found.includes(fragmentsPath)) {
+              found.push(fragmentsPath);
+            }
+          }
+        } catch {
+          // Package not resolvable or unreadable, skip
+        }
+      }
+    } catch {
+      // No package.json or unreadable
+    }
+  }
+
+  return found;
+}
+
 /**
  * MCP Server configuration
  */
@@ -276,66 +334,12 @@ export function createMcpServer(config: McpServerConfig): Server {
   // Lazy-loaded resources
   let segmentsData: CompiledSegmentsFile | null = null;
   let packageName: string | null = null;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- lazy-loaded from service
+   
   let browserPool: any = null;
   let storageManager: any = null;
   let diffEngine: any = null;
   let isPoolWarming = false;
 
-  /**
-   * Find fragments.json files:
-   * 1. Walk up from projectRoot (for library authors with a local build)
-   * 2. Read package.json deps and resolve packages with a "fragments" field
-   */
-  function findFragmentsJson(startDir: string): string[] {
-    const found: string[] = [];
-    const resolvedStart = resolve(startDir);
-
-    // 1. Walk upward from startDir (library author flow)
-    let dir = resolvedStart;
-    while (true) {
-      const candidate = join(dir, BRAND.outFile);
-      if (existsSync(candidate)) {
-        found.push(candidate);
-        break;
-      }
-      const parent = dirname(dir);
-      if (parent === dir) break;
-      dir = parent;
-    }
-
-    // 2. Read package.json and resolve deps with "fragments" field
-    const pkgJsonPath = join(resolvedStart, 'package.json');
-    if (existsSync(pkgJsonPath)) {
-      try {
-        const pkgJson = JSON.parse(readFileSync(pkgJsonPath, 'utf-8'));
-        const allDeps = {
-          ...pkgJson.dependencies,
-          ...pkgJson.devDependencies,
-        };
-        for (const depName of Object.keys(allDeps)) {
-          const depPkgPath = join(resolvedStart, 'node_modules', depName, 'package.json');
-          if (!existsSync(depPkgPath)) continue;
-          try {
-            const depPkg = JSON.parse(readFileSync(depPkgPath, 'utf-8'));
-            if (depPkg.fragments) {
-              const fragmentsPath = join(resolvedStart, 'node_modules', depName, depPkg.fragments);
-              if (existsSync(fragmentsPath) && !found.includes(fragmentsPath)) {
-                found.push(fragmentsPath);
-              }
-            }
-          } catch {
-            // Skip unreadable package
-          }
-        }
-      } catch {
-        // No package.json or unreadable
-      }
-    }
-
-    return found;
-  }
-
   async function loadSegments(): Promise<CompiledSegmentsFile> {
     if (segmentsData) {
       return segmentsData;

package/src/service/enhance/doc-extractor.ts

@@ -139,7 +139,7 @@ function extractJSDoc(
 
   // Parse JSDoc content
   const lines = content.split("\n");
-  let currentDescription: string[] = [];
+  const currentDescription: string[] = [];
   let currentTag: string | null = null;
   let currentTagContent: string[] = [];
 
@@ -197,7 +197,7 @@ function processTag(
       if (propMatch) {
         const [, type, nameRaw, description] = propMatch;
         const isOptional = nameRaw.startsWith("[");
-        const name = nameRaw.replace(/[\[\]]/g, "");
+        const name = nameRaw.replaceAll("[", "").replaceAll("]", "");
         docs.props?.push({
           name,
           type,

package/src/service/enhance/props-extractor.ts

@@ -331,7 +331,7 @@ function parseJSDocContent(
   }
 ): void {
   const lines = content.split("\n");
-  let currentDescription: string[] = [];
+  const currentDescription: string[] = [];
   let currentTag: string | null = null;
   let currentTagContent: string[] = [];
 

package/src/service/enhance/storybook-parser.ts

@@ -484,7 +484,7 @@ function camelToTitle(str: string): string {
 function inferComponentFromPath(filePath: string): string {
   const fileName = basename(filePath);
   // Remove .stories.tsx etc
-  let name = fileName.replace(/\.stories\.(tsx?|jsx?|mdx?)$/, "");
+  const name = fileName.replace(/\.stories\.(tsx?|jsx?|mdx?)$/, "");
   // Handle patterns like Button.stories.tsx
   return name;
 }

package/src/service/figma.ts

@@ -313,7 +313,7 @@ export class FigmaClient {
    */
   parseUrl(url: string): FigmaUrlParts {
     // Match both /file/ and /design/ paths
-    const urlPattern = /figma\.com\/(?:file|design)\/([^\/]+)\/[^?]*\?.*node-id=([^&]+)/i;
+    const urlPattern = /figma\.com\/(?:file|design)\/([^/]+)\/[^?]*\?.*node-id=([^&]+)/i;
     const match = url.match(urlPattern);
 
     if (!match) {
@@ -410,7 +410,7 @@ export class FigmaClient {
    */
   parseFileUrl(url: string): { fileKey: string; nodeId?: string } {
     // Match both /file/ and /design/ paths
-    const urlPattern = /figma\.com\/(?:file|design)\/([^\/]+)/i;
+    const urlPattern = /figma\.com\/(?:file|design)\/([^/]+)/i;
     const match = url.match(urlPattern);
 
     if (!match) {

package/src/service/metrics-store.ts

@@ -200,12 +200,13 @@ export class MetricsStore {
       let key: string;
 
       switch (groupBy) {
-        case "week":
+        case "week": {
           // Get ISO week
           const weekStart = new Date(date);
           weekStart.setDate(date.getDate() - date.getDay());
           key = weekStart.toISOString().split("T")[0];
           break;
+        }
         case "month":
           key = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}`;
           break;

package/src/service/patch-generator.ts

@@ -189,13 +189,14 @@ function generateHunk(
 
   // The hunk format depends on the style type
   switch (styleType) {
-    case "inline":
+    case "inline": {
       // React inline style: { backgroundColor: '#0051c2' }
       const camelProp = toCamelCase(cssProperty);
       lines.push(`@@ -1,1 +1,1 @@ inline style`);
       lines.push(`-  ${camelProp}: '${currentValue}',`);
       lines.push(`+  ${camelProp}: 'var(${suggestedFix.tokenName})',`);
       break;
+    }
 
     case "styled-components":
     case "emotion":

package/src/test/reporters/junit.ts

@@ -176,11 +176,15 @@ function generateTestCaseXml(result: TestResult): string {
  * Escape special XML characters
  */
 function escapeXml(str: string): string {
-  return str
+  const cleaned = Array.from(str).filter((ch) => {
+    const code = ch.charCodeAt(0);
+    return code === 0x09 || code === 0x0A || code === 0x0D || code >= 0x20;
+  }).join('');
+
+  return cleaned
     .replace(/&/g, '&')
     .replace(/</g, '&lt;')
     .replace(/>/g, '&gt;')
     .replace(/"/g, '&quot;')
-    .replace(/'/g, '&apos;')
-    .replace(/[\x00-\x08\x0B\x0C\x0E-\x1F]/g, ''); // Remove invalid XML characters
+    .replace(/'/g, '&apos;');
 }