@analogjs/content 3.0.0-alpha.2 → 3.0.0-alpha.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@analogjs/content",
-  "version": "3.0.0-alpha.2",
+  "version": "3.0.0-alpha.21",
   "description": "Content Rendering for Analog",
   "type": "module",
   "author": "Brandon Roberts <robertsbt@gmail.com>",
@@ -23,81 +23,110 @@
     "url": "https://github.com/sponsors/brandonroberts"
   },
   "peerDependencies": {
-    "@angular/common": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0",
-    "@angular/core": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0",
-    "@angular/platform-browser": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0",
-    "@angular/router": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0",
+    "@angular/common": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0",
+    "@angular/core": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0",
+    "@angular/platform-browser": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0",
+    "@angular/router": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0",
     "@nx/devkit": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0 || ^22.0.0 || ^22",
     "front-matter": "^4.0.2",
-    "marked": "^15.0.7",
-    "marked-gfm-heading-id": "^4.1.1",
-    "marked-highlight": "^2.2.1",
-    "marked-mangle": "^1.1.10",
+    "marked": "^17.0.5",
+    "marked-gfm-heading-id": "^4.1.3",
+    "marked-highlight": "^2.2.3",
+    "marked-mangle": "^1.1.12",
     "rxjs": "^6.5.0 || ^7.5.0",
-    "prismjs": "^1.29.0",
+    "@standard-schema/spec": "^1.1.0",
+    "prismjs": "^1.30.0",
     "satori": "^0.10.14",
     "satori-html": "^0.3.2",
-    "sharp": "^0.33.5"
+    "sharp": "^0.34.5",
+    "md4x": ">=0.0.20"
   },
   "peerDependenciesMeta": {
     "@nx/devkit": {
       "optional": true
     },
+    "md4x": {
+      "optional": true
+    },
     "satori": {
       "optional": true
     },
     "satori-html": {
       "optional": true
     },
+    "@standard-schema/spec": {
+      "optional": true
+    },
     "sharp": {
       "optional": true
+    },
+    "prismjs": {
+      "optional": true
     }
   },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "ng-update": {
-    "packageGroup": [
-      "@analogjs/platform",
-      "@analogjs/content",
-      "@analogjs/router",
-      "@analogjs/storybook-angular",
-      "@analogjs/vite-plugin-angular",
-      "@analogjs/vite-plugin-nitro",
-      "@analogjs/vitest-angular"
-    ],
-    "migrations": "./plugin/migrations.json"
-  },
-  "publishConfig": {
-    "access": "public",
-    "provenance": true
-  },
-  "module": "fesm2022/analogjs-content.mjs",
-  "typings": "types/analogjs-content.d.ts",
   "exports": {
     "./package.json": {
       "default": "./package.json"
     },
     ".": {
-      "types": "./types/analogjs-content.d.ts",
+      "types": "./types/src/index.d.ts",
+      "import": "./fesm2022/analogjs-content.mjs",
       "default": "./fesm2022/analogjs-content.mjs"
     },
+    "./md4x": {
+      "types": "./types/md4x/src/index.d.ts",
+      "import": "./fesm2022/analogjs-content-md4x.mjs",
+      "default": "./fesm2022/analogjs-content-md4x.mjs"
+    },
+    "./mdc": {
+      "types": "./types/mdc/src/index.d.ts",
+      "import": "./fesm2022/analogjs-content-mdc.mjs",
+      "default": "./fesm2022/analogjs-content-mdc.mjs"
+    },
     "./og": {
-      "types": "./types/analogjs-content-og.d.ts",
+      "types": "./types/og/src/index.d.ts",
+      "import": "./fesm2022/analogjs-content-og.mjs",
       "default": "./fesm2022/analogjs-content-og.mjs"
     },
     "./prism-highlighter": {
-      "types": "./types/analogjs-content-prism-highlighter.d.ts",
+      "types": "./types/prism-highlighter/src/index.d.ts",
+      "import": "./fesm2022/analogjs-content-prism-highlighter.mjs",
       "default": "./fesm2022/analogjs-content-prism-highlighter.mjs"
     },
     "./resources": {
-      "types": "./types/analogjs-content-resources.d.ts",
+      "types": "./types/resources/src/index.d.ts",
+      "import": "./fesm2022/analogjs-content-resources.mjs",
       "default": "./fesm2022/analogjs-content-resources.mjs"
     },
     "./shiki-highlighter": {
-      "types": "./types/analogjs-content-shiki-highlighter.d.ts",
+      "types": "./types/shiki-highlighter/src/index.d.ts",
+      "import": "./fesm2022/analogjs-content-shiki-highlighter.mjs",
       "default": "./fesm2022/analogjs-content-shiki-highlighter.mjs"
     }
   },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "@analogjs/vite-plugin-angular": "3.0.0-alpha.21"
+  },
+  "ng-update": {
+    "packageGroup": [
+      "@analogjs/platform",
+      "@analogjs/content",
+      "@analogjs/router",
+      "@analogjs/storybook-angular",
+      "@analogjs/vite-plugin-angular",
+      "@analogjs/vite-plugin-nitro",
+      "@analogjs/vitest-angular"
+    ],
+    "migrations": "./plugin/migrations.json"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "module": "fesm2022/analogjs-content.mjs",
+  "typings": "types/src/index.d.ts",
   "sideEffects": false
-}
+}

package/plugin/package.json

@@ -1,23 +1,3 @@
 {
-  "name": "content-plugin",
-  "version": "0.0.1",
-  "main": "./src/index.js",
-  "type": "commonjs",
-  "dependencies": {
-    "ts-morph": "^27.0.0",
-    "tslib": "^2.8.1"
-  },
-  "peerDependencies": {
-    "@nx/devkit": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0 || ^22.0.0 || ^22",
-    "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-beta.0"
-  },
-  "peerDependenciesMeta": {
-    "@nx/devkit": {
-      "optional": true
-    },
-    "vite": {
-      "optional": true
-    }
-  },
-  "types": "./src/index.d.ts"
-}
+  "type": "commonjs"
+}

package/plugin/src/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: any;
-export default _default;
+//#region src/index.d.ts
+declare const _default: undefined;
+export = _default;
+//# sourceMappingURL=index.d.ts.map

package/plugin/src/index.js

@@ -1,4 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
+
+//#region src/index.ts
+const _default = void 0;
+
+//#endregion
+module.exports = _default;
 //# sourceMappingURL=index.js.map

package/plugin/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../packages/content-plugin/src/index.ts"],"names":[],"mappings":";;AAAA,kBAAe,KAAK,CAAC,CAAC"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../content-plugin/src/index.ts"],"sourcesContent":["// eslint-disable-next-line @typescript-eslint/no-inferrable-types\nconst _default: undefined = void 0;\nexport default _default;\n"],"mappings":";;AACA,MAAM,WAAsB,KAAK"}

package/plugin/src/migrations/update-markdown-version/compat.d.ts

@@ -1,2 +1,6 @@
-declare const _default: (generatorOptions: any) => (tree: any, context: any) => Promise<any>;
-export default _default;
+import { convertNxGenerator } from "@nx/devkit";
+
+//#region src/migrations/update-markdown-version/compat.d.ts
+declare const _default: ReturnType<typeof convertNxGenerator>;
+export = _default;
+//# sourceMappingURL=compat.d.ts.map

package/plugin/src/migrations/update-markdown-version/compat.js

@@ -1,6 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const devkit_1 = require("@nx/devkit");
-const update_markdown_version_1 = require("./update-markdown-version");
-exports.default = (0, devkit_1.convertNxGenerator)(update_markdown_version_1.default);
+const require_src_migrations_update_markdown_version_update_markdown_version = require('./update-markdown-version.js');
+let _nx_devkit = require("@nx/devkit");
+
+//#region src/migrations/update-markdown-version/compat.ts
+const _default = (0, _nx_devkit.convertNxGenerator)(require_src_migrations_update_markdown_version_update_markdown_version);
+
+//#endregion
+module.exports = _default;
 //# sourceMappingURL=compat.js.map

package/plugin/src/migrations/update-markdown-version/compat.js.map

@@ -1 +1 @@
-{"version":3,"file":"compat.js","sourceRoot":"","sources":["../../../../../../../packages/content-plugin/src/migrations/update-markdown-version/compat.ts"],"names":[],"mappings":";;AAAA,uCAAgD;AAChD,uEAA8D;AAE9D,kBAAe,IAAA,2BAAkB,EAAC,iCAAqB,CAAC,CAAC"}
+{"version":3,"file":"compat.js","names":["updateMarkdownVersion"],"sources":["../../../../../../content-plugin/src/migrations/update-markdown-version/compat.ts"],"sourcesContent":["import { convertNxGenerator } from '@nx/devkit';\nimport updateMarkdownVersion from './update-markdown-version';\n\nconst _default: ReturnType<typeof convertNxGenerator> = convertNxGenerator(\n  updateMarkdownVersion,\n);\nexport default _default;\n"],"mappings":";;;;AAGA,MAAM,8CACJA,uEACD"}

package/plugin/src/migrations/update-markdown-version/update-markdown-version.d.ts

@@ -1,2 +1,6 @@
-import { Tree } from '@nx/devkit';
-export default function update(host: Tree): Promise<() => void>;
+import { Tree } from "@nx/devkit";
+
+//#region src/migrations/update-markdown-version/update-markdown-version.d.ts
+declare function update(host: Tree): Promise<(() => void) | undefined>;
+export = update;
+//# sourceMappingURL=update-markdown-version.d.ts.map

package/plugin/src/migrations/update-markdown-version/update-markdown-version.js

@@ -1,23 +1,21 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = update;
-const devkit_1 = require("@nx/devkit");
+let _nx_devkit = require("@nx/devkit");
+
+//#region src/migrations/update-markdown-version/update-markdown-version.ts
 async function update(host) {
-    // NOTE: we only add the dependency if the project is an Angular project
-    //  Nx projects can add the dependency from migrations.json
-    let dependencyAdded = false;
-    if (host.exists('/angular.json')) {
-        (0, devkit_1.addDependenciesToPackageJson)(host, {
-            marked: '^15.0.7',
-            'marked-mangle': '^1.1.10',
-            'marked-highlight': '^2.2.1',
-            'marked-gfm-heading-id': '^4.1.1',
-        }, {});
-        dependencyAdded = true;
-    }
-    await (0, devkit_1.formatFiles)(host);
-    if (dependencyAdded) {
-        return () => (0, devkit_1.installPackagesTask)(host);
-    }
+	let dependencyAdded = false;
+	if (host.exists("/angular.json")) {
+		(0, _nx_devkit.addDependenciesToPackageJson)(host, {
+			marked: "^15.0.7",
+			"marked-mangle": "^1.1.10",
+			"marked-highlight": "^2.2.1",
+			"marked-gfm-heading-id": "^4.1.1"
+		}, {});
+		dependencyAdded = true;
+	}
+	await (0, _nx_devkit.formatFiles)(host);
+	if (dependencyAdded) return () => (0, _nx_devkit.installPackagesTask)(host);
 }
+
+//#endregion
+module.exports = update;
 //# sourceMappingURL=update-markdown-version.js.map

package/plugin/src/migrations/update-markdown-version/update-markdown-version.js.map

@@ -1 +1 @@
-{"version":3,"file":"update-markdown-version.js","sourceRoot":"","sources":["../../../../../../../packages/content-plugin/src/migrations/update-markdown-version/update-markdown-version.ts"],"names":[],"mappings":";;AAOA,yBAuBC;AA9BD,uCAKoB;AAEL,KAAK,UAAU,MAAM,CAAC,IAAU;IAC7C,wEAAwE;IACxE,2DAA2D;IAC3D,IAAI,eAAe,GAAG,KAAK,CAAC;IAC5B,IAAI,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,EAAE,CAAC;QACjC,IAAA,qCAA4B,EAC1B,IAAI,EACJ;YACE,MAAM,EAAE,SAAS;YACjB,eAAe,EAAE,SAAS;YAC1B,kBAAkB,EAAE,QAAQ;YAC5B,uBAAuB,EAAE,QAAQ;SAClC,EACD,EAAE,CACH,CAAC;QACF,eAAe,GAAG,IAAI,CAAC;IACzB,CAAC;IAED,MAAM,IAAA,oBAAW,EAAC,IAAI,CAAC,CAAC;IAExB,IAAI,eAAe,EAAE,CAAC;QACpB,OAAO,GAAG,EAAE,CAAC,IAAA,4BAAmB,EAAC,IAAI,CAAC,CAAC;IACzC,CAAC;AACH,CAAC"}
+{"version":3,"file":"update-markdown-version.js","names":[],"sources":["../../../../../../content-plugin/src/migrations/update-markdown-version/update-markdown-version.ts"],"sourcesContent":["import {\n  addDependenciesToPackageJson,\n  type Tree,\n  formatFiles,\n  installPackagesTask,\n} from '@nx/devkit';\n\nexport default async function update(\n  host: Tree,\n): Promise<(() => void) | undefined> {\n  // NOTE: we only add the dependency if the project is an Angular project\n  //  Nx projects can add the dependency from migrations.json\n  let dependencyAdded = false;\n  if (host.exists('/angular.json')) {\n    addDependenciesToPackageJson(\n      host,\n      {\n        marked: '^15.0.7',\n        'marked-mangle': '^1.1.10',\n        'marked-highlight': '^2.2.1',\n        'marked-gfm-heading-id': '^4.1.1',\n      },\n      {},\n    );\n    dependencyAdded = true;\n  }\n\n  await formatFiles(host);\n\n  if (dependencyAdded) {\n    return () => installPackagesTask(host);\n  }\n}\n"],"mappings":";;;AAOA,eAA8B,OAC5B,MACmC;CAGnC,IAAI,kBAAkB;AACtB,KAAI,KAAK,OAAO,gBAAgB,EAAE;AAChC,+CACE,MACA;GACE,QAAQ;GACR,iBAAiB;GACjB,oBAAoB;GACpB,yBAAyB;GAC1B,EACD,EAAE,CACH;AACD,oBAAkB;;AAGpB,mCAAkB,KAAK;AAEvB,KAAI,gBACF,kDAAiC,KAAK"}

package/prism-highlighter/package.json

@@ -1,4 +1,4 @@
 {
   "module": "../fesm2022/analogjs-content-prism-highlighter.mjs",
-  "typings": "../types/analogjs-content-prism-highlighter.d.ts"
-}
+  "typings": "../types/prism-highlighter/src/index.d.ts"
+}

package/resources/package.json

@@ -1,4 +1,4 @@
 {
   "module": "../fesm2022/analogjs-content-resources.mjs",
-  "typings": "../types/analogjs-content-resources.d.ts"
-}
+  "typings": "../types/resources/src/index.d.ts"
+}

package/shiki-highlighter/package.json

@@ -1,4 +1,4 @@
 {
   "module": "../fesm2022/analogjs-content-shiki-highlighter.mjs",
-  "typings": "../types/analogjs-content-shiki-highlighter.d.ts"
-}
+  "typings": "../types/shiki-highlighter/src/index.d.ts"
+}

package/src/lib/devtools/content-devtools-client.ts

@@ -0,0 +1,215 @@
+/**
+ * Client-side script for the Analog Content DevTools panel.
+ * Injected by the Vite plugin in dev mode only.
+ *
+ * @experimental Content DevTools is experimental and may change in future releases.
+ */
+
+interface DevToolsData {
+  renderer: string;
+  renderTimeMs: number;
+  frontmatter: Record<string, unknown>;
+  toc: Array<{ id: string; level: number; text: string }>;
+  contentLength: number;
+  headingCount: number;
+}
+
+const STORAGE_KEY = 'analog-content-devtools-open';
+
+// Cache the latest devtools payload at module level so events fired
+// during initial bootstrap (before the panel is created) are not lost.
+let latestDevToolsData: DevToolsData | null = null;
+let panelUpdateCallback: ((data: DevToolsData) => void) | null = null;
+
+window.addEventListener('analog-content-devtools-data', ((
+  e: CustomEvent<DevToolsData>,
+) => {
+  latestDevToolsData = e.detail;
+  if (panelUpdateCallback) {
+    panelUpdateCallback(e.detail);
+  }
+}) as EventListener);
+
+function createPanel(): HTMLElement {
+  const root = document.createElement('div');
+  root.id = 'analog-content-devtools';
+  root.innerHTML = `
+    <button class="acd-toggle" title="Analog Content DevTools">
+      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-1 2l5 5h-5V4zM6 20V4h5v7h7v9H6z"/>
+        <path d="M8 13h8v1H8zm0 3h6v1H8z" opacity=".6"/>
+      </svg>
+    </button>
+    <div class="acd-panel" style="display:none">
+      <div class="acd-header">
+        <span>Analog Content DevTools <span class="acd-badge acd-badge-experimental">experimental</span></span>
+      </div>
+      <div class="acd-tabs">
+        <button class="acd-tab" data-tab="overview" data-active="true">Overview</button>
+        <button class="acd-tab" data-tab="frontmatter">Frontmatter</button>
+        <button class="acd-tab" data-tab="toc">TOC</button>
+      </div>
+      <div class="acd-body">
+        <div class="acd-empty">No content data available. Navigate to a content page.</div>
+      </div>
+    </div>
+  `;
+  return root;
+}
+
+function renderOverview(data: DevToolsData): string {
+  const speedClass =
+    data.renderTimeMs < 5
+      ? 'acd-fast'
+      : data.renderTimeMs > 50
+        ? 'acd-slow'
+        : '';
+  return `
+    <div class="acd-section">
+      <div class="acd-section-title">Renderer</div>
+      <div class="acd-kv">
+        <span class="acd-key">Active</span>
+        <span class="acd-value"><span class="acd-badge acd-badge-renderer">${data.renderer}</span></span>
+      </div>
+      <div class="acd-kv">
+        <span class="acd-key">Render time</span>
+        <span class="acd-value ${speedClass}">${data.renderTimeMs.toFixed(2)}ms</span>
+      </div>
+    </div>
+    <div class="acd-section">
+      <div class="acd-section-title">Content</div>
+      <div class="acd-kv">
+        <span class="acd-key">Length</span>
+        <span class="acd-value">${data.contentLength.toLocaleString()} chars</span>
+      </div>
+      <div class="acd-kv">
+        <span class="acd-key">Headings</span>
+        <span class="acd-value">${data.headingCount}</span>
+      </div>
+      <div class="acd-kv">
+        <span class="acd-key">Frontmatter keys</span>
+        <span class="acd-value">${Object.keys(data.frontmatter).length}</span>
+      </div>
+    </div>
+  `;
+}
+
+function renderFrontmatter(data: DevToolsData): string {
+  const keys = Object.keys(data.frontmatter);
+  if (keys.length === 0) {
+    return '<div class="acd-empty">No frontmatter found.</div>';
+  }
+  return `
+    <div class="acd-section">
+      <div class="acd-section-title">Frontmatter attributes</div>
+      <div class="acd-pre">${escapeHtml(JSON.stringify(data.frontmatter, null, 2))}</div>
+    </div>
+  `;
+}
+
+function renderToc(data: DevToolsData): HTMLElement {
+  if (data.toc.length === 0) {
+    const empty = document.createElement('div');
+    empty.className = 'acd-empty';
+    empty.textContent = 'No headings found.';
+    return empty;
+  }
+  const section = document.createElement('div');
+  section.className = 'acd-section';
+  const title = document.createElement('div');
+  title.className = 'acd-section-title';
+  title.textContent = `Table of Contents (${data.toc.length} headings)`;
+  section.appendChild(title);
+
+  for (const h of data.toc) {
+    const item = document.createElement('div');
+    item.className = 'acd-toc-item';
+    item.style.paddingLeft = `${(h.level - 1) * 12}px`;
+    const anchor = document.createElement('a');
+    anchor.setAttribute('href', `#${encodeURIComponent(h.id)}`);
+    anchor.textContent = `${'#'.repeat(h.level)} ${h.text}`;
+    item.appendChild(anchor);
+    section.appendChild(item);
+  }
+
+  return section;
+}
+
+function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+
+function initDevTools() {
+  if (document.getElementById('analog-content-devtools')) return;
+
+  const panel = createPanel();
+  document.body.appendChild(panel);
+
+  const toggle = panel.querySelector('.acd-toggle') as HTMLElement;
+  const panelEl = panel.querySelector('.acd-panel') as HTMLElement;
+  const body = panel.querySelector('.acd-body') as HTMLElement;
+  const tabs = panel.querySelectorAll('.acd-tab');
+
+  let isOpen = localStorage.getItem(STORAGE_KEY) === 'true';
+  let activeTab = 'overview';
+  let currentData: DevToolsData | null = latestDevToolsData;
+
+  function updateVisibility() {
+    panelEl.style.display = isOpen ? 'flex' : 'none';
+    localStorage.setItem(STORAGE_KEY, String(isOpen));
+  }
+
+  function updateBody() {
+    if (!currentData) {
+      body.innerHTML =
+        '<div class="acd-empty">No content data available. Navigate to a content page.</div>';
+      return;
+    }
+    switch (activeTab) {
+      case 'overview':
+        body.innerHTML = renderOverview(currentData);
+        break;
+      case 'frontmatter':
+        body.innerHTML = renderFrontmatter(currentData);
+        break;
+      case 'toc':
+        body.replaceChildren(renderToc(currentData));
+        break;
+    }
+  }
+
+  toggle.addEventListener('click', () => {
+    isOpen = !isOpen;
+    updateVisibility();
+  });
+
+  tabs.forEach((tab) => {
+    tab.addEventListener('click', () => {
+      activeTab = (tab as HTMLElement).dataset['tab'] || 'overview';
+      tabs.forEach((t) =>
+        (t as HTMLElement).setAttribute('data-active', String(t === tab)),
+      );
+      updateBody();
+    });
+  });
+
+  // Wire the module-level listener to update the panel
+  panelUpdateCallback = (data: DevToolsData) => {
+    currentData = data;
+    updateBody();
+  };
+
+  updateVisibility();
+  updateBody();
+}
+
+// Init when DOM is ready
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initDevTools);
+} else {
+  initDevTools();
+}