generated from coulomb/repo-seed
tegwick
fd12bbd34a
- Created comprehensive NPM_PUBLICATION_PLAN.md with 9 phases - Covers bundling, testing, and npm publication process - Uses Rollup with marked.js as peer dependency - Targets 3-5 day implementation timeline - Updated TODO.md with current active tasks
1565 lines
35 KiB
Markdown
1565 lines
35 KiB
Markdown
# 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
|
|
|
|
```bash
|
|
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`
|
|
|
|
```javascript
|
|
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
|
|
|
|
```bash
|
|
# 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
|
|
|
|
```bash
|
|
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`
|
|
|
|
```javascript
|
|
/**
|
|
* 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)
|
|
|
|
```javascript
|
|
// 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
|
|
|
|
```bash
|
|
# 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:
|
|
|
|
```javascript
|
|
// Example: js/core/section-manager.js
|
|
export { SectionManager };
|
|
```
|
|
|
|
#### 2.4: Handle marked.js Peer Dependency
|
|
|
|
**Update**: `src/index.js` to check for marked.js
|
|
|
|
```javascript
|
|
// 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`
|
|
|
|
```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:
|
|
|
|
```bash
|
|
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`
|
|
|
|
```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
|
|
|
|
```bash
|
|
# 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
|
|
|
|
```markdown
|
|
# TestDrive-JSUI
|
|
|
|
**A JavaScript-first markdown editor library.**
|
|
|
|
[](https://www.npmjs.com/package/testdrive-jsui)
|
|
[](LICENSE)
|
|
[](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
|
|
|
|
```bash
|
|
npm install testdrive-jsui marked
|
|
```
|
|
|
|
#### ES6 Modules
|
|
|
|
```javascript
|
|
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
|
|
|
|
```javascript
|
|
const TestDriveJSUI = require('testdrive-jsui');
|
|
require('testdrive-jsui/dist/testdrive-jsui.css');
|
|
|
|
const editor = new TestDriveJSUI({...});
|
|
```
|
|
|
|
### Browser (UMD)
|
|
|
|
```html
|
|
<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
|
|
|
|
```bash
|
|
npm install testdrive-jsui marked
|
|
```
|
|
|
|
### Via CDN
|
|
|
|
```html
|
|
<!-- 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](https://github.com/markitect/testdrive-jsui/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
|
|
|
|
```bash
|
|
# 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`
|
|
|
|
```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`
|
|
|
|
```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)**
|
|
```bash
|
|
# Open in browser
|
|
open test/cdn-test.html
|
|
# Or: python -m http.server 8000
|
|
```
|
|
|
|
**Test 2: Node.js (CommonJS)**
|
|
|
|
**Create**: `test/node-test.js`
|
|
|
|
```javascript
|
|
// 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);
|
|
}
|
|
```
|
|
|
|
```bash
|
|
node test/node-test.js
|
|
```
|
|
|
|
**Test 3: Local npm install**
|
|
|
|
```bash
|
|
# 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
|
|
|
|
```bash
|
|
# 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
|
|
|
|
```bash
|
|
# 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
|
|
|
|
```bash
|
|
# 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)**
|
|
|
|
```bash
|
|
# 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:
|
|
|
|
```json
|
|
"repository": {
|
|
"type": "git",
|
|
"url": "https://github.com/markitect/markitect.git",
|
|
"directory": "capabilities/testdrive-jsui"
|
|
}
|
|
```
|
|
|
|
#### 7.3: Create GitHub Release
|
|
|
|
```bash
|
|
# 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
|
|
|
|
```bash
|
|
# 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
|
|
|
|
```bash
|
|
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
|
|
|
|
```bash
|
|
# 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
|
|
|
|
```bash
|
|
# 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)
|
|
|
|
```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 - 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:**
|
|
|
|
```bash
|
|
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:**
|
|
|
|
```markdown
|
|
[](https://www.npmjs.com/package/testdrive-jsui)
|
|
[](https://www.npmjs.com/package/testdrive-jsui)
|
|
[](https://bundlephobia.com/package/testdrive-jsui)
|
|
[](LICENSE)
|
|
[](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:**
|
|
|
|
```markdown
|
|
🚀 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
|
|
|
|
```bash
|
|
# 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
|
|
|
|
```bash
|
|
# Clear cache and rebuild
|
|
rm -rf node_modules package-lock.json dist/
|
|
npm install
|
|
npm run build:prod
|
|
```
|
|
|
|
### Publish Fails
|
|
|
|
```bash
|
|
# Check npm login
|
|
npm whoami
|
|
|
|
# Check package name
|
|
npm view testdrive-jsui
|
|
|
|
# Try with verbose logging
|
|
npm publish --verbose
|
|
```
|
|
|
|
### CDN Not Working
|
|
|
|
```bash
|
|
# 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
|
|
|
|
```bash
|
|
# 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**
|