generated from coulomb/repo-seed
build: implement bundling system with Rollup
Phase 1-3 Complete: - ✅ Installed Rollup with all required plugins - ✅ Created rollup.config.js for UMD, ESM, CJS builds - ✅ Created src/index.js entry point - ✅ Created src/styles.css for CSS bundling - ✅ Added ES6 exports to debug-system.js - ✅ Excluded Node.js-only html-generator.js from bundle Build outputs: - dist/testdrive-jsui.js (217KB UMD) - dist/testdrive-jsui.min.js (107KB minified!) - dist/testdrive-jsui.esm.js (199KB ES Module) - dist/testdrive-jsui.cjs.js (199KB CommonJS) - dist/testdrive-jsui.css (minified, all styles inlined) All builds include source maps for debugging.
This commit is contained in:
@@ -287,4 +287,7 @@ class MarkitectDebugSystem {
|
||||
}
|
||||
|
||||
// Initialize and expose globally
|
||||
window.MarkitectDebugSystem = new MarkitectDebugSystem();
|
||||
window.MarkitectDebugSystem = new MarkitectDebugSystem();
|
||||
|
||||
// ES6 export for bundler
|
||||
export { MarkitectDebugSystem };
|
||||
2807
package-lock.json
generated
2807
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
12
package.json
12
package.json
@@ -37,12 +37,22 @@
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.23.0",
|
||||
"@babel/preset-env": "^7.23.0",
|
||||
"@rollup/plugin-babel": "^6.1.0",
|
||||
"@rollup/plugin-commonjs": "^29.0.0",
|
||||
"@rollup/plugin-node-resolve": "^16.0.3",
|
||||
"@rollup/plugin-terser": "^0.4.4",
|
||||
"autoprefixer": "^10.4.23",
|
||||
"babel-jest": "^29.7.0",
|
||||
"cssnano": "^7.1.2",
|
||||
"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"
|
||||
"jest-environment-jsdom": "^29.7.0",
|
||||
"postcss": "^8.5.6",
|
||||
"postcss-import": "^16.1.1",
|
||||
"rollup": "^4.53.5",
|
||||
"rollup-plugin-postcss": "^4.0.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"jsdom": "^23.0.0"
|
||||
|
||||
123
rollup.config.js
Normal file
123
rollup.config.js
Normal file
@@ -0,0 +1,123 @@
|
||||
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 postcssImport from 'postcss-import';
|
||||
import autoprefixer from 'autoprefixer';
|
||||
import cssnano from 'cssnano';
|
||||
|
||||
const production = !process.env.ROLLUP_WATCH;
|
||||
|
||||
// Shared Babel config
|
||||
const babelConfig = {
|
||||
babelHelpers: 'bundled',
|
||||
exclude: 'node_modules/**',
|
||||
presets: [
|
||||
['@babel/preset-env', {
|
||||
targets: {
|
||||
browsers: ['> 0.5%', 'last 2 versions', 'not dead']
|
||||
}
|
||||
}]
|
||||
]
|
||||
};
|
||||
|
||||
// Shared plugins (without CSS)
|
||||
const getPluginsWithoutCSS = () => [
|
||||
resolve({ browser: true }),
|
||||
commonjs(),
|
||||
babel(babelConfig),
|
||||
// PostCSS but don't extract (CSS already extracted in first build)
|
||||
postcss({
|
||||
inject: false, // Don't inject or extract, just process
|
||||
extract: false
|
||||
})
|
||||
];
|
||||
|
||||
export default [
|
||||
// UMD build (browser-friendly, default) - EXTRACTS CSS
|
||||
{
|
||||
input: 'src/index.js',
|
||||
output: {
|
||||
name: 'TestDriveJSUI',
|
||||
file: 'dist/testdrive-jsui.js',
|
||||
format: 'umd',
|
||||
sourcemap: true,
|
||||
exports: 'named', // Fix mixing named/default exports warning
|
||||
globals: {
|
||||
marked: 'marked'
|
||||
},
|
||||
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(babelConfig),
|
||||
postcss({
|
||||
extract: 'testdrive-jsui.css', // Extract CSS to separate file
|
||||
minimize: production,
|
||||
plugins: [
|
||||
postcssImport(), // Resolve @import statements first
|
||||
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,
|
||||
exports: 'named',
|
||||
globals: {
|
||||
marked: 'marked'
|
||||
}
|
||||
},
|
||||
external: ['marked'],
|
||||
plugins: [
|
||||
...getPluginsWithoutCSS(),
|
||||
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: getPluginsWithoutCSS()
|
||||
},
|
||||
|
||||
// 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: getPluginsWithoutCSS()
|
||||
}
|
||||
];
|
||||
59
src/index.js
Normal file
59
src/index.js
Normal file
@@ -0,0 +1,59 @@
|
||||
/**
|
||||
* TestDrive-JSUI - Main Entry Point
|
||||
*
|
||||
* This file bundles all components into a single distributable library.
|
||||
*
|
||||
* @version 1.0.0
|
||||
* @license MIT
|
||||
*/
|
||||
|
||||
// Import CSS (will be extracted by postcss plugin)
|
||||
import './styles.css';
|
||||
|
||||
// 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/config-loader.js';
|
||||
// Note: html-generator.js is Node.js only (uses 'fs'), excluded from browser bundle
|
||||
|
||||
// Widgets (if needed)
|
||||
import '../js/widgets/base/Widget.js';
|
||||
import '../js/widgets/base/UIWidget.js';
|
||||
import '../js/widgets/navigation/DocumentNavigator.js';
|
||||
|
||||
// Plugins
|
||||
import '../js/plugins/document-navigator-plugin.js';
|
||||
|
||||
// Main library class
|
||||
// Note: testdrive-jsui.js already exports in multiple formats
|
||||
// We'll import it and re-export
|
||||
|
||||
// The main class is defined in testdrive-jsui.js
|
||||
// Since all dependencies are loaded above, we can now load the main class
|
||||
import '../js/testdrive-jsui.js';
|
||||
|
||||
// Get the TestDriveJSUI from window (set by testdrive-jsui.js)
|
||||
// In UMD build, this will be available globally
|
||||
const TestDriveJSUI = (typeof window !== 'undefined' && window.TestDriveJSUI)
|
||||
|| (typeof global !== 'undefined' && global.TestDriveJSUI);
|
||||
|
||||
// Export for ES modules and CommonJS
|
||||
export default TestDriveJSUI;
|
||||
export { TestDriveJSUI };
|
||||
|
||||
// Export version
|
||||
export const version = '1.0.0';
|
||||
38
src/styles.css
Normal file
38
src/styles.css
Normal file
@@ -0,0 +1,38 @@
|
||||
/**
|
||||
* TestDrive-JSUI Styles
|
||||
* Combined stylesheet for the markdown editor
|
||||
*
|
||||
* @version 1.0.0
|
||||
* @license MIT
|
||||
*/
|
||||
|
||||
/* Base editor styles */
|
||||
@import '../static/css/editor.css';
|
||||
|
||||
/* Control panels */
|
||||
@import '../static/css/controls.css';
|
||||
|
||||
/* Default theme (GitHub) */
|
||||
@import '../static/css/themes/github.css';
|
||||
|
||||
/* CSS Variables and Base Styles */
|
||||
:root {
|
||||
--testdrive-primary-color: #0366d6;
|
||||
--testdrive-border-color: #e1e4e8;
|
||||
--testdrive-background: #ffffff;
|
||||
--testdrive-text-color: #24292e;
|
||||
--testdrive-hover-bg: #f6f8fa;
|
||||
--testdrive-focus-shadow: rgba(3, 102, 214, 0.3);
|
||||
}
|
||||
|
||||
.testdrive-container {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: var(--testdrive-text-color);
|
||||
background: var(--testdrive-background);
|
||||
}
|
||||
|
||||
/* Ensure smooth transitions */
|
||||
* {
|
||||
transition: background-color 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
Reference in New Issue
Block a user