testdrive-jsui/NPM_PUBLICATION_PLAN.md

TestDrive-JSUI npm Publication Workplan

Goal: Bundle and publish testdrive-jsui as a production-ready npm package Strategy: Single-file bundle with marked.js as peer dependency Timeline: 3-5 days for polished implementation Target Version: 1.0.0

---

Overview

Transform testdrive-jsui from a multi-file development library into a professionally bundled npm package available via:

• npm install testdrive-jsui
• CDN: jsdelivr.net, unpkg.com
• Direct download from GitHub releases

---

Phase 1: Build System Setup (Day 1, Morning)

Objective

Install and configure Rollup bundler with all necessary plugins.

Tasks

1.1: Install Build Dependencies

cd /home/worsch/markitect_project/capabilities/testdrive-jsui

npm install --save-dev rollup \
  @rollup/plugin-node-resolve \
  @rollup/plugin-commonjs \
  @rollup/plugin-terser \
  @rollup/plugin-babel \
  @babel/core \
  @babel/preset-env \
  rollup-plugin-postcss \
  postcss \
  autoprefixer \
  cssnano

Why each plugin:

• rollup: Main bundler
• @rollup/plugin-node-resolve: Resolves node_modules
• @rollup/plugin-commonjs: Converts CommonJS to ES6
• @rollup/plugin-terser: Minification
• @rollup/plugin-babel: Transpile for older browsers
• rollup-plugin-postcss: Bundle CSS
• cssnano: Minify CSS

1.2: Create Rollup Configuration

Create: rollup.config.js

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';
import terser from '@rollup/plugin-terser';
import postcss from 'rollup-plugin-postcss';
import autoprefixer from 'autoprefixer';
import cssnano from 'cssnano';

const production = !process.env.ROLLUP_WATCH;

export default [
  // UMD build (browser-friendly, default)
  {
    input: 'src/index.js',
    output: {
      name: 'TestDriveJSUI',
      file: 'dist/testdrive-jsui.js',
      format: 'umd',
      sourcemap: true,
      banner: `/*!
 * TestDrive-JSUI v1.0.0
 * JavaScript-first markdown editor library
 * (c) 2025 MarkiTect Team
 * Released under MIT License
 */`
    },
    external: ['marked'], // Peer dependency
    plugins: [
      resolve({
        browser: true
      }),
      commonjs(),
      babel({
        babelHelpers: 'bundled',
        exclude: 'node_modules/**',
        presets: [
          ['@babel/preset-env', {
            targets: {
              browsers: ['> 0.5%', 'last 2 versions', 'not dead']
            }
          }]
        ]
      }),
      postcss({
        extract: 'testdrive-jsui.css',
        minimize: production,
        plugins: [
          autoprefixer(),
          production && cssnano()
        ].filter(Boolean),
        sourceMap: true
      })
    ]
  },

  // UMD minified build
  {
    input: 'src/index.js',
    output: {
      name: 'TestDriveJSUI',
      file: 'dist/testdrive-jsui.min.js',
      format: 'umd',
      sourcemap: true
    },
    external: ['marked'],
    plugins: [
      resolve({ browser: true }),
      commonjs(),
      babel({
        babelHelpers: 'bundled',
        exclude: 'node_modules/**',
        presets: [
          ['@babel/preset-env', {
            targets: {
              browsers: ['> 0.5%', 'last 2 versions', 'not dead']
            }
          }]
        ]
      }),
      terser({
        format: {
          comments: /^!/
        }
      })
    ]
  },

  // ESM build (for modern bundlers)
  {
    input: 'src/index.js',
    output: {
      file: 'dist/testdrive-jsui.esm.js',
      format: 'esm',
      sourcemap: true
    },
    external: ['marked'],
    plugins: [
      resolve(),
      commonjs(),
      babel({
        babelHelpers: 'bundled',
        exclude: 'node_modules/**',
        presets: [
          ['@babel/preset-env', {
            targets: {
              esmodules: true
            }
          }]
        ]
      })
    ]
  },

  // CommonJS build (for Node.js)
  {
    input: 'src/index.js',
    output: {
      file: 'dist/testdrive-jsui.cjs.js',
      format: 'cjs',
      sourcemap: true,
      exports: 'named'
    },
    external: ['marked'],
    plugins: [
      resolve(),
      commonjs(),
      babel({
        babelHelpers: 'bundled',
        exclude: 'node_modules/**',
        presets: [
          ['@babel/preset-env', {
            targets: {
              node: '14'
            }
          }]
        ]
      })
    ]
  }
];

1.3: Verify Configuration

# Test build (shouldn't work yet - missing src/index.js)
npm run build

Expected: Error about missing src/index.js (we'll create it in Phase 2)

Success Criteria

• ✅ All npm packages installed
• ✅ rollup.config.js created
• ✅ No syntax errors in config

---

Phase 2: Create Bundle Entry Point (Day 1, Afternoon)

Objective

Create a unified entry point that imports all components and exports the main API.

Tasks

2.1: Reorganize Source Files

Create: src/ directory structure

mkdir -p src/core src/components src/controls src/utils src/widgets

Strategy: Keep original js/ for development, create src/ for bundling

2.2: Create Main Entry Point

Create: src/index.js

/**
 * TestDrive-JSUI - Main Entry Point
 *
 * This file bundles all components into a single distributable library.
 */

// Core components (must be loaded first)
import '../js/core/debug-system.js';
import '../js/core/section-manager.js';

// UI Components
import '../js/components/dom-renderer.js';
import '../js/components/document-controls.js';
import '../js/components/debug-panel.js';

// Control panels
import '../js/controls/control-base.js';
import '../js/controls/edit-control.js';
import '../js/controls/debug-control.js';
import '../js/controls/status-control.js';
import '../js/controls/contents-control.js';

// Utilities
import '../js/utils/markdown-utils.js';

// Main library class
import { TestDriveJSUI } from '../js/testdrive-jsui.js';

// Import CSS
import '../static/css/editor.css';
import '../static/css/controls.css';
import '../static/css/themes/github.css';

// Export main API
export default TestDriveJSUI;
export { TestDriveJSUI };

// Export version
export const version = '1.0.0';

2.3: Ensure Proper Exports in Source Files

Update: js/testdrive-jsui.js (already has exports, verify)

// At end of file, ensure both export formats:
if (typeof module !== 'undefined' && module.exports) {
    module.exports = { TestDriveJSUI };
}

if (typeof window !== 'undefined') {
    window.TestDriveJSUI = TestDriveJSUI;
}

// Add ES6 export for bundler
export { TestDriveJSUI };

Action: Check all component files have proper exports

# Find files without exports
grep -L "export" js/core/*.js js/components/*.js js/controls/*.js

For each file without exports, add at the end:

// Example: js/core/section-manager.js
export { SectionManager };

2.4: Handle marked.js Peer Dependency

Update: src/index.js to check for marked.js

// At top of src/index.js
if (typeof marked === 'undefined') {
  console.warn(
    'TestDrive-JSUI: marked.js is required but not found. ' +
    'Please install: npm install marked'
  );
}

Success Criteria

• ✅ src/index.js created
• ✅ All component files have proper exports
• ✅ Build runs without errors: npm run build

---

Phase 3: CSS Bundling (Day 2, Morning)

Objective

Combine all CSS into a single distributable file with proper namespacing.

Tasks

3.1: Create CSS Entry Point

Create: src/styles.css

/**
 * TestDrive-JSUI Styles
 * Combined stylesheet for the markdown editor
 */

/* Base editor styles */
@import '../static/css/editor.css';

/* Control panels */
@import '../static/css/controls.css';

/* Default theme (GitHub) */
@import '../static/css/themes/github.css';

/* Reset and base styles */
:root {
  --testdrive-primary-color: #0366d6;
  --testdrive-border-color: #e1e4e8;
  --testdrive-background: #ffffff;
  --testdrive-text-color: #24292e;
}

.testdrive-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: var(--testdrive-text-color);
}

3.2: Update Rollup Config to Include CSS

Already done in Phase 1 (postcss plugin). Verify it's working:

npm run build
ls -lh dist/testdrive-jsui.css

3.3: Create Minified CSS Version

The postcss plugin with cssnano will create minified version automatically in production mode.

Success Criteria

• ✅ dist/testdrive-jsui.css created
• ✅ CSS is properly minified in production
• ✅ Source maps generated

---

Phase 4: Package Configuration (Day 2, Afternoon)

Objective

Configure package.json for proper npm distribution.

Tasks

4.1: Update package.json

Update: package.json

{
  "name": "testdrive-jsui",
  "version": "1.0.0",
  "description": "JavaScript-first markdown editor library with interactive UI",
  "main": "dist/testdrive-jsui.cjs.js",
  "module": "dist/testdrive-jsui.esm.js",
  "browser": "dist/testdrive-jsui.min.js",
  "style": "dist/testdrive-jsui.css",
  "unpkg": "dist/testdrive-jsui.min.js",
  "jsdelivr": "dist/testdrive-jsui.min.js",
  "types": "dist/index.d.ts",
  "files": [
    "dist/",
    "README.md",
    "LICENSE",
    "CHANGELOG.md"
  ],
  "scripts": {
    "build": "rollup -c",
    "build:watch": "rollup -c -w",
    "build:prod": "NODE_ENV=production rollup -c",
    "dev": "npm run build:watch",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage",
    "prepublishOnly": "npm run build:prod && npm test",
    "lint": "eslint js/**/*.js src/**/*.js",
    "lint:fix": "eslint js/**/*.js src/**/*.js --fix",
    "clean": "rm -rf dist/ coverage/",
    "size": "npm run build:prod && du -h dist/*"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/markitect/testdrive-jsui.git"
  },
  "keywords": [
    "markdown",
    "editor",
    "javascript",
    "ui",
    "wysiwyg",
    "contenteditable",
    "section-editing",
    "interactive",
    "browser",
    "frontend",
    "marked",
    "markdown-editor"
  ],
  "author": "MarkiTect Team <team@markitect.dev>",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/markitect/testdrive-jsui/issues"
  },
  "homepage": "https://github.com/markitect/testdrive-jsui#readme",
  "peerDependencies": {
    "marked": "^11.0.0 || ^12.0.0"
  },
  "peerDependenciesMeta": {
    "marked": {
      "optional": false
    }
  },
  "devDependencies": {
    "@babel/core": "^7.23.0",
    "@babel/preset-env": "^7.23.0",
    "@rollup/plugin-babel": "^6.0.4",
    "@rollup/plugin-commonjs": "^25.0.7",
    "@rollup/plugin-node-resolve": "^15.2.3",
    "@rollup/plugin-terser": "^0.4.4",
    "autoprefixer": "^10.4.16",
    "babel-jest": "^29.7.0",
    "cssnano": "^6.0.1",
    "eslint": "^8.57.0",
    "eslint-config-standard": "^17.1.0",
    "eslint-plugin-jest": "^27.6.0",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "postcss": "^8.4.32",
    "rollup": "^4.9.0",
    "rollup-plugin-postcss": "^4.0.2"
  },
  "dependencies": {
    "jsdom": "^23.0.0"
  },
  "engines": {
    "node": ">=14.0.0",
    "npm": ">=6.0.0"
  }
}

4.2: Create .npmignore

Create: .npmignore

# Development files
js/tests/
tests/
examples/
docs/
node_modules/
coverage/
.nyc_output/

# Source files (we ship dist/ only)
js/
src/
static/

# Build config
rollup.config.js
.eslintrc
.babelrc
jest.config.js
tsconfig.json

# Documentation (except README)
CLAUDE.md
MIGRATION_STATUS.md
CLEANUP_REPORT.md
STANDALONE_PLAN.md
NPM_PUBLICATION_PLAN.md

# VCS
.git/
.gitignore
.gitattributes

# IDE
.vscode/
.idea/
*.swp
*.swo
*~

# OS
.DS_Store
Thumbs.db

# Python stuff
__pycache__/
*.py[cod]
*.egg-info/
venv/
.pytest_cache/

# Misc
*.log
.env

4.3: Verify Files Included in Package

# See what will be published
npm pack --dry-run

# Should only include:
# - dist/
# - README.md
# - LICENSE
# - package.json

Success Criteria

• ✅ package.json properly configured
• ✅ .npmignore excludes development files
• ✅ npm pack --dry-run shows correct files
• ✅ Bundle size reasonable (<100KB minified)

---

Phase 5: Documentation Updates (Day 3, Morning)

Objective

Update README and create usage documentation for npm users.

Tasks

5.1: Update Main README

Update: README.md - Add prominent npm usage section

# TestDrive-JSUI

**A JavaScript-first markdown editor library.**

[![npm version](https://img.shields.io/npm/v/testdrive-jsui.svg)](https://www.npmjs.com/package/testdrive-jsui)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
[![Bundle Size](https://img.shields.io/bundlephobia/minzip/testdrive-jsui)](https://bundlephobia.com/package/testdrive-jsui)

TestDrive-JSUI is a pure JavaScript library for interactive markdown editing with section-based management. Works standalone in any browser with zero backend requirements.

## Quick Start

### CDN Usage (Fastest)

```html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/testdrive-jsui@1/dist/testdrive-jsui.css">
</head>
<body>
  <div id="editor"></div>

  <!-- Peer dependency -->
  <script src="https://cdn.jsdelivr.net/npm/marked@11/marked.min.js"></script>

  <!-- TestDrive-JSUI -->
  <script src="https://cdn.jsdelivr.net/npm/testdrive-jsui@1/dist/testdrive-jsui.min.js"></script>

  <script>
    const editor = new TestDriveJSUI({
      container: '#editor',
      markdown: '# Hello World\n\nEdit me!',
      mode: 'edit'
    });
  </script>
</body>
</html>

npm Installation

npm install testdrive-jsui marked

ES6 Modules

import TestDriveJSUI from 'testdrive-jsui';
import 'testdrive-jsui/dist/testdrive-jsui.css';

const editor = new TestDriveJSUI({
  container: '#editor',
  markdown: '# Hello World',
  mode: 'edit'
});

// Listen to events
editor.on('save', (data) => {
  console.log('Saved:', data.markdown);
});

CommonJS

const TestDriveJSUI = require('testdrive-jsui');
require('testdrive-jsui/dist/testdrive-jsui.css');

const editor = new TestDriveJSUI({...});

Browser (UMD)

<script src="node_modules/marked/marked.min.js"></script>
<script src="node_modules/testdrive-jsui/dist/testdrive-jsui.min.js"></script>
<script>
  const editor = new TestDriveJSUI({...});
</script>

Installation

Via npm

npm install testdrive-jsui marked

Via CDN

<!-- Production (minified) -->
<script src="https://cdn.jsdelivr.net/npm/testdrive-jsui@1/dist/testdrive-jsui.min.js"></script>

<!-- Development (with source maps) -->
<script src="https://cdn.jsdelivr.net/npm/testdrive-jsui@1/dist/testdrive-jsui.js"></script>

<!-- Alternative CDN -->
<script src="https://unpkg.com/testdrive-jsui@1/dist/testdrive-jsui.min.js"></script>

Download

Download from GitHub Releases

Requirements

• marked.js v11.0.0+ (peer dependency)
• Modern browser with ES6 support (Chrome 60+, Firefox 60+, Safari 12+, Edge 79+)

[... rest of existing README ...]

#### 5.2: Create CHANGELOG.md

**Create**: `CHANGELOG.md`

```markdown
# Changelog

All notable changes to this project will be documented in this file.

The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

## [1.0.0] - 2025-12-16

### Added
- Initial public release
- JavaScript-first markdown editor library
- Section-based editing with independent section management
- Interactive UI with compass-positioned control panels
- Support for edit and view modes
- Event-driven API for integration
- Auto-save functionality
- Keyboard shortcuts
- LocalStorage integration
- Download markdown as .md file
- Table of contents generation
- Debug panel with logging
- Status control showing document statistics
- Comprehensive test suite (Jest + pytest)
- Full documentation

### Features
- **Core Library**: Pure JavaScript with marked.js as only dependency
- **Bundled Distribution**: Single-file UMD, ESM, and CJS builds
- **CSS Included**: Complete styling with GitHub theme
- **Peer Dependency**: Uses marked.js for markdown parsing
- **Multiple Installation Methods**: npm, CDN, direct download
- **Source Maps**: Available for debugging

### Technical
- Built with Rollup
- Transpiled with Babel for broad browser support
- Minified with Terser
- CSS processed with PostCSS and autoprefixer
- 68 JavaScript tests passing (Jest)
- 15 Python integration tests passing (pytest)

## [Unreleased]

Nothing yet.

5.3: Create LICENSE file

Create: LICENSE

MIT License

Copyright (c) 2025 MarkiTect Team

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

Success Criteria

• ✅ README has clear npm installation instructions
• ✅ CHANGELOG.md created following standard format
• ✅ LICENSE file present
• ✅ Documentation covers all installation methods

---

Phase 6: Testing and Validation (Day 3, Afternoon)

Objective

Verify the built package works correctly in all environments.

Tasks

6.1: Test Build Output

# Clean and rebuild
npm run clean
npm run build:prod

# Check output
ls -lh dist/

# Expected files:
# - testdrive-jsui.js (UMD, ~120KB)
# - testdrive-jsui.js.map
# - testdrive-jsui.min.js (~50KB)
# - testdrive-jsui.min.js.map
# - testdrive-jsui.esm.js (~110KB)
# - testdrive-jsui.esm.js.map
# - testdrive-jsui.cjs.js (~110KB)
# - testdrive-jsui.cjs.js.map
# - testdrive-jsui.css (~15KB)
# - testdrive-jsui.css.map

6.2: Create Test HTML Files

Create: test/cdn-test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TestDrive-JSUI - CDN Test</title>
    <link rel="stylesheet" href="../dist/testdrive-jsui.css">
    <style>
        body {
            font-family: system-ui, -apple-system, sans-serif;
            max-width: 1200px;
            margin: 40px auto;
            padding: 20px;
            background: #f5f5f5;
        }
        #editor {
            background: white;
            min-height: 400px;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        h1 { color: #333; }
        .status {
            background: #e3f2fd;
            padding: 10px;
            border-radius: 4px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <h1>TestDrive-JSUI Bundle Test</h1>
    <div class="status">
        <strong>Status:</strong> <span id="status">Loading...</span>
    </div>
    <div id="editor"></div>

    <!-- Peer dependency -->
    <script src="https://cdn.jsdelivr.net/npm/marked@11/marked.min.js"></script>

    <!-- TestDrive-JSUI from dist -->
    <script src="../dist/testdrive-jsui.js"></script>

    <script>
        document.getElementById('status').textContent = 'Initializing...';

        try {
            const editor = new TestDriveJSUI({
                container: '#editor',
                markdown: `# Bundle Test

## Success! 🎉

This page is using the **bundled distribution** of TestDrive-JSUI.

### What's being tested:
- ✅ UMD bundle loading
- ✅ CSS bundle loading
- ✅ Peer dependency (marked.js)
- ✅ All components initialized
- ✅ Event system working

Try editing this content!`,
                mode: 'edit',
                theme: 'github'
            });

            editor.on('initialized', () => {
                document.getElementById('status').textContent = '✅ Successfully initialized!';
                console.log('Editor initialized:', editor.getStatus());
            });

            editor.on('save', (data) => {
                console.log('Save event:', data);
                alert('Save triggered! Check console for data.');
            });

        } catch (error) {
            document.getElementById('status').textContent = '❌ Error: ' + error.message;
            console.error('Initialization error:', error);
        }
    </script>
</body>
</html>

Create: test/esm-test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TestDrive-JSUI - ESM Test</title>
    <link rel="stylesheet" href="../dist/testdrive-jsui.css">
</head>
<body>
    <h1>ESM Bundle Test</h1>
    <div id="editor"></div>

    <script type="module">
        import TestDriveJSUI from '../dist/testdrive-jsui.esm.js';

        // Note: marked.js would need to be imported as ESM too
        // For this test, we'll load it from CDN in a regular script tag

        window.addEventListener('DOMContentLoaded', () => {
            const editor = new TestDriveJSUI({
                container: '#editor',
                markdown: '# ESM Test\n\nThis uses the ES Module build.',
                mode: 'edit'
            });

            console.log('ESM editor initialized:', editor);
        });
    </script>

    <script src="https://cdn.jsdelivr.net/npm/marked@11/marked.min.js"></script>
</body>
</html>

6.3: Test in Different Environments

Test 1: Browser (UMD)

# Open in browser
open test/cdn-test.html
# Or: python -m http.server 8000

Test 2: Node.js (CommonJS)

Create: test/node-test.js

// test/node-test.js
const { TestDriveJSUI } = require('../dist/testdrive-jsui.cjs.js');

console.log('Testing TestDrive-JSUI in Node.js...');

try {
    const editor = new TestDriveJSUI({
        container: '#test',
        markdown: '# Node Test'
    });
    console.log('✅ Module loads in Node.js');
    console.log('✅ TestDriveJSUI class available');
    console.log('Status:', editor.getStatus());
} catch (error) {
    console.error('❌ Error:', error.message);
    process.exit(1);
}

node test/node-test.js

Test 3: Local npm install

# Create test project
mkdir -p /tmp/testdrive-test
cd /tmp/testdrive-test
npm init -y

# Install from local build
npm install /home/worsch/markitect_project/capabilities/testdrive-jsui/testdrive-jsui-1.0.0.tgz

# Test import
node -e "const TD = require('testdrive-jsui'); console.log('✅ Package installed:', TD)"

6.4: Verify Package Contents

# Create tarball
npm pack

# Extract and inspect
tar -tzf testdrive-jsui-1.0.0.tgz | head -30

# Should see:
# package/package.json
# package/README.md
# package/LICENSE
# package/CHANGELOG.md
# package/dist/testdrive-jsui.js
# package/dist/testdrive-jsui.min.js
# package/dist/testdrive-jsui.esm.js
# package/dist/testdrive-jsui.cjs.js
# package/dist/testdrive-jsui.css
# package/dist/*.map

6.5: Run All Tests

# JavaScript tests
npm test

# Build
npm run build:prod

# Check sizes
npm run size

Success Criteria

• ✅ All test HTML files load without errors
• ✅ Node.js can require the CJS build
• ✅ Package tarball contains only necessary files
• ✅ All tests pass (68 Jest tests)
• ✅ Bundle size < 100KB minified
• ✅ CSS loads correctly
• ✅ No console errors in browser

---

Phase 7: Pre-Publication Setup (Day 4, Morning)

Objective

Prepare npm account and repository for publication.

Tasks

7.1: Setup npm Account

# Login to npm (or create account)
npm login

# Verify login
npm whoami

# Check package name availability
npm view testdrive-jsui

# Expected: "npm ERR! 404 'testdrive-jsui' is not in the npm registry"
# (Good - name is available!)

7.2: Setup GitHub Repository

Option A: Separate Repository (Recommended for standalone)

# Create new repo on GitHub: testdrive-jsui
# Then:
cd /home/worsch/markitect_project/capabilities/testdrive-jsui

# Initialize git (if not already)
git init
git add .
git commit -m "feat: initial release v1.0.0"

# Add remote
git remote add origin https://github.com/YOUR-USERNAME/testdrive-jsui.git
git branch -M main
git push -u origin main

Option B: Keep in MarkiTect monorepo

Update package.json URLs to point to subdirectory:

"repository": {
  "type": "git",
  "url": "https://github.com/markitect/markitect.git",
  "directory": "capabilities/testdrive-jsui"
}

7.3: Create GitHub Release

# Tag the release
git tag -a v1.0.0 -m "Release v1.0.0 - Initial public release"
git push origin v1.0.0

# On GitHub, create release from tag
# - Title: "v1.0.0 - Initial Release"
# - Description: Copy from CHANGELOG.md
# - Attach: dist/ folder as zip

7.4: Final Pre-Publication Checklist

# Run all checks
npm run lint           # No lint errors
npm test              # All tests pass
npm run build:prod    # Clean build
npm pack --dry-run    # Verify contents
npm publish --dry-run # Simulate publish

Success Criteria

• ✅ npm account setup and verified
• ✅ GitHub repository created/configured
• ✅ Git tags created
• ✅ All pre-publish checks pass
• ✅ Package name available on npm

---

Phase 8: Publication (Day 4, Afternoon)

Objective

Publish to npm and verify availability.

Tasks

8.1: Publish to npm

cd /home/worsch/markitect_project/capabilities/testdrive-jsui

# Final check
npm run prepublishOnly

# Publish!
npm publish

# Expected output:
# + testdrive-jsui@1.0.0

8.2: Verify Publication

# Wait 2-3 minutes for npm to propagate

# Check package page
open https://www.npmjs.com/package/testdrive-jsui

# Test installation
mkdir -p /tmp/verify-npm
cd /tmp/verify-npm
npm init -y
npm install testdrive-jsui marked

# Test it works
node -e "const TD = require('testdrive-jsui'); console.log('✅ Works!', TD)"

8.3: Verify CDN Access

# Wait 5-10 minutes for CDN propagation

# Check jsdelivr
curl -I https://cdn.jsdelivr.net/npm/testdrive-jsui@1.0.0/dist/testdrive-jsui.min.js

# Check unpkg
curl -I https://unpkg.com/testdrive-jsui@1.0.0/dist/testdrive-jsui.min.js

# Both should return 200 OK

8.4: Create CDN Demo Page

Create: docs/cdn-demo.html (commit to repo for GitHub Pages)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TestDrive-JSUI - Live Demo</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/testdrive-jsui@1/dist/testdrive-jsui.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        .container {
            background: white;
            border-radius: 12px;
            padding: 40px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }
        h1 {
            color: #667eea;
            margin-top: 0;
        }
        .badge {
            display: inline-block;
            background: #667eea;
            color: white;
            padding: 4px 12px;
            border-radius: 4px;
            font-size: 14px;
            margin-right: 10px;
        }
        #editor {
            margin-top: 20px;
            min-height: 500px;
        }
        .footer {
            margin-top: 20px;
            text-align: center;
            color: #666;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🚀 TestDrive-JSUI Live Demo</h1>
        <p>
            <span class="badge">v1.0.0</span>
            <span class="badge">Pure JavaScript</span>
            <span class="badge">Zero Backend</span>
        </p>

        <div id="editor"></div>

        <div class="footer">
            <p>
                <strong>TestDrive-JSUI</strong> •
                <a href="https://github.com/markitect/testdrive-jsui">GitHub</a> •
                <a href="https://www.npmjs.com/package/testdrive-jsui">npm</a>
            </p>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/marked@11/marked.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/testdrive-jsui@1/dist/testdrive-jsui.min.js"></script>

    <script>
        const editor = new TestDriveJSUI({
            container: '#editor',
            markdown: `# Welcome to TestDrive-JSUI! 🎉

This is a **live demo** running directly from npm CDN. No build step, no backend, just pure JavaScript!

## Try It Out

This editor is fully interactive. Try:
- Clicking any section to edit it
- Using **Ctrl+S** to save (stores in localStorage)
- Using the control panels (positioned around the edges)

## What Makes This Special?

### 🎯 Pure JavaScript
- Zero backend required
- Works from \`file://\` URLs
- Only dependency: marked.js

### 📦 Easy Installation
\`\`\`bash
npm install testdrive-jsui marked
\`\`\`

### 🌐 CDN Ready
\`\`\`html
<script src="https://cdn.jsdelivr.net/npm/testdrive-jsui@1/dist/testdrive-jsui.min.js"></script>
\`\`\`

### ⚡ Section-Based Editing
Each section (separated by headers) can be edited independently. Click on any section to try it!

## Features

- ✅ Interactive markdown editing
- ✅ Section management
- ✅ Auto-save to localStorage
- ✅ Keyboard shortcuts
- ✅ Download as .md file
- ✅ Table of contents
- ✅ Status indicators
- ✅ Debug panel (for developers)
- ✅ Event-driven API

## Code Example

\`\`\`javascript
const editor = new TestDriveJSUI({
  container: '#editor',
  markdown: '# Hello World',
  mode: 'edit',
  autosave: true
});

editor.on('save', (data) => {
  console.log('Saved:', data.markdown);
});
\`\`\`

---

**Built with ❤️ by the MarkiTect Team**`,
            mode: 'edit',
            autosave: true,
            controls: {
                editControl: true,
                statusControl: true,
                contentsControl: true
            }
        });

        editor.on('initialized', () => {
            console.log('✅ TestDrive-JSUI initialized from CDN!');
        });
    </script>
</body>
</html>

Commit and enable GitHub Pages:

git add docs/cdn-demo.html
git commit -m "docs: add live CDN demo page"
git push

# On GitHub: Settings → Pages → Source: main branch → /docs folder

Success Criteria

• ✅ Package visible on npmjs.com
• ✅ Can install via npm install testdrive-jsui
• ✅ CDN links work (jsdelivr, unpkg)
• ✅ Demo page works from GitHub Pages
• ✅ Package appears in npm search results

---

Phase 9: Post-Publication (Day 5)

Objective

Announce release and monitor feedback.

Tasks

9.1: Update Repository README Badge

Add to top of README.md:

[![npm version](https://img.shields.io/npm/v/testdrive-jsui.svg?style=flat-square)](https://www.npmjs.com/package/testdrive-jsui)
[![npm downloads](https://img.shields.io/npm/dm/testdrive-jsui.svg?style=flat-square)](https://www.npmjs.com/package/testdrive-jsui)
[![Bundle Size](https://img.shields.io/bundlephobia/minzip/testdrive-jsui?style=flat-square)](https://bundlephobia.com/package/testdrive-jsui)
[![License](https://img.shields.io/npm/l/testdrive-jsui.svg?style=flat-square)](LICENSE)
[![GitHub Stars](https://img.shields.io/github/stars/markitect/testdrive-jsui?style=flat-square)](https://github.com/markitect/testdrive-jsui)

9.2: Create Announcement

Post on:

• GitHub Discussions (if enabled)
• Twitter/X
• Reddit (r/javascript, r/webdev)
• Dev.to
• Hacker News (Show HN)

Example announcement:

🚀 Introducing TestDrive-JSUI v1.0.0

A JavaScript-first markdown editor library that works standalone in any browser.

✨ Features:
- Pure JS (only dependency: marked.js)
- Section-based editing
- Zero backend required
- Works from file:// URLs
- Event-driven API
- 50KB minified

📦 Installation:
npm install testdrive-jsui marked

🔗 Links:
- npm: https://npmjs.com/package/testdrive-jsui
- GitHub: https://github.com/markitect/testdrive-jsui
- Demo: https://markitect.github.io/testdrive-jsui/demo

Try it with just a CDN link - no build step required!

9.3: Monitor Initial Feedback

# Watch npm downloads
npm info testdrive-jsui

# Monitor GitHub
# - Watch for issues
# - Check stars/forks
# - Review any PRs

# Check npm stats
open https://npm-stat.com/charts.html?package=testdrive-jsui

9.4: Create Example Projects

Create example repos:

1. testdrive-jsui-react-example
2. testdrive-jsui-vue-example
3. testdrive-jsui-vanilla-example

Each showing integration with popular frameworks.

Success Criteria

• ✅ Badges added to README
• ✅ Announcement posted
• ✅ Monitoring setup for feedback
• ✅ Example projects created (optional)

---

Troubleshooting Common Issues

Build Fails

# Clear cache and rebuild
rm -rf node_modules package-lock.json dist/
npm install
npm run build:prod

Publish Fails

# Check npm login
npm whoami

# Check package name
npm view testdrive-jsui

# Try with verbose logging
npm publish --verbose

CDN Not Working

# CDNs take 5-30 minutes to propagate
# Try purging cache:
curl -X PURGE https://cdn.jsdelivr.net/npm/testdrive-jsui@1/dist/testdrive-jsui.min.js

Package Too Large

# Check what's included
npm pack
tar -tzf testdrive-jsui-1.0.0.tgz

# Check .npmignore is excluding properly
npm pack --dry-run

---

Final Checklist

Before Publishing

• All tests passing (npm test)
• Build successful (npm run build:prod)
• Package size acceptable (<100KB minified)
• README updated with installation instructions
• CHANGELOG.md created
• LICENSE file present
• .npmignore properly configured
• package.json metadata complete
• Git repository tagged
• Test HTML files work
• Verified in clean npm install

After Publishing

• Package visible on npmjs.com
• CDN links working (jsdelivr, unpkg)
• GitHub release created
• Demo page live
• Badges added to README
• Announcement posted
• Monitoring setup

---

Timeline Summary

Day	Phase	Duration	Tasks
1 AM	Phase 1	3h	Build system setup
1 PM	Phase 2	4h	Create entry point
2 AM	Phase 3	2h	CSS bundling
2 PM	Phase 4	3h	Package configuration
3 AM	Phase 5	3h	Documentation
3 PM	Phase 6	4h	Testing & validation
4 AM	Phase 7	2h	Pre-publication setup
4 PM	Phase 8	2h	Publication
5	Phase 9	3h	Post-publication

Total: ~26 hours (~3-4 working days)

---

Success Metrics

Week 1

• 10+ npm downloads
• 0 critical issues reported
• CDN availability 100%

Month 1

• 100+ npm downloads
• 10+ GitHub stars
• 1+ community contribution

Quarter 1

• 1000+ npm downloads
• Featured in a blog post
• Used in at least 3 external projects

---

End of NPM Publication Workplan