Implement Git submodule packaging strategy for Angular libraries
This commit implements a complete library extraction and packaging solution for converting the current Angular workspace into individual Git repositories suitable for submodule distribution. ## Changes Made: ### Public API Optimizations: - Fixed ui-design-system naming from "shared-ui" to "ui-design-system" - Optimized ui-essentials exports for better tree-shaking - Added specific exports for core components (ButtonComponent, TextInputComponent) - Improved documentation and organization of public APIs ### Library Extraction Implementation: - Created comprehensive extraction plan (LIBRARY_EXTRACTION_PLAN.md) - Implemented automated extraction script (extract-library.sh) - Extracted all 12 libraries into individual repository structures - Each library now has standalone package.json, angular.json, and configs ### Documentation & Integration: - Complete submodule integration guide (SUBMODULE_INTEGRATION_GUIDE.md) - Development workflow recommendations - Consumer integration instructions - Library maintenance strategies ### Libraries Extracted: - ui-design-system (SCSS design system) - shared-utils (utilities) - ui-essentials (essential components) - ui-data-utils (data manipulation) - ui-animations (CSS animations) - ui-accessibility (a11y features) - ui-backgrounds (background utilities) - ui-font-manager (font management) - hcl-studio (color management) - auth-client (authentication) - ui-code-display (syntax highlighting) - ui-landing-pages (landing components) ## Benefits: - LLM complexity reduction: ~90% (50k+ files → 500-2k per library) - Professional library distribution via Git submodules - Independent versioning and releases - Reusable across multiple projects - Selective library inclusion - Clean, focused development contexts 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Giuliano Silvestro
225
extract-library.sh
Normal file
225
extract-library.sh
Normal file
@@ -0,0 +1,225 @@
|
||||
#!/bin/bash
|
||||
|
||||
# Library extraction script
|
||||
# Usage: ./extract-library.sh [library-name] [description] [keywords]
|
||||
|
||||
if [ $# -lt 1 ]; then
|
||||
echo "Usage: $0 <library-name> [description] [keywords]"
|
||||
echo "Example: $0 shared-utils 'Common utilities and shared services' 'angular,utilities,shared'"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
LIBRARY_NAME="$1"
|
||||
DESCRIPTION="${2:-Angular library}"
|
||||
KEYWORDS="${3:-angular,library}"
|
||||
EXTRACT_DIR="../extracted-libraries"
|
||||
SOURCE_DIR="projects/$LIBRARY_NAME"
|
||||
|
||||
# Check if source library exists
|
||||
if [ ! -d "$SOURCE_DIR" ]; then
|
||||
echo "Error: Source library '$SOURCE_DIR' does not exist"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# Create extraction directory
|
||||
DEST_DIR="$EXTRACT_DIR/$LIBRARY_NAME"
|
||||
mkdir -p "$DEST_DIR"
|
||||
|
||||
echo "Extracting $LIBRARY_NAME to $DEST_DIR..."
|
||||
|
||||
# Copy source files
|
||||
cp -r "$SOURCE_DIR/src" "$DEST_DIR/"
|
||||
cp -r "$SOURCE_DIR"/tsconfig*.json "$DEST_DIR/"
|
||||
cp "$SOURCE_DIR/ng-package.json" "$DEST_DIR/"
|
||||
|
||||
# Create .gitignore
|
||||
cat > "$DEST_DIR/.gitignore" << EOF
|
||||
/node_modules/
|
||||
/dist/
|
||||
*.tsbuildinfo
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
*.log
|
||||
coverage/
|
||||
.nyc_output/
|
||||
.vscode/
|
||||
.idea/
|
||||
*.swp
|
||||
*.swo
|
||||
*~
|
||||
EOF
|
||||
|
||||
# Create README.md
|
||||
cat > "$DEST_DIR/README.md" << EOF
|
||||
# $LIBRARY_NAME
|
||||
|
||||
$DESCRIPTION
|
||||
|
||||
## Installation
|
||||
|
||||
### As Git Submodule
|
||||
\`\`\`bash
|
||||
git submodule add https://github.com/yourorg/$LIBRARY_NAME.git libs/$LIBRARY_NAME
|
||||
cd libs/$LIBRARY_NAME
|
||||
npm install
|
||||
npm run build
|
||||
\`\`\`
|
||||
|
||||
### Update tsconfig.json
|
||||
\`\`\`json
|
||||
{
|
||||
"compilerOptions": {
|
||||
"paths": {
|
||||
"$LIBRARY_NAME": ["./libs/$LIBRARY_NAME/dist"],
|
||||
"$LIBRARY_NAME/*": ["./libs/$LIBRARY_NAME/dist/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
\`\`\`
|
||||
|
||||
## Usage
|
||||
|
||||
\`\`\`typescript
|
||||
import { /* exports */ } from '$LIBRARY_NAME';
|
||||
\`\`\`
|
||||
|
||||
## Development
|
||||
|
||||
\`\`\`bash
|
||||
# Install dependencies
|
||||
npm install
|
||||
|
||||
# Run tests
|
||||
npm test
|
||||
|
||||
# Build library
|
||||
npm run build
|
||||
|
||||
# Watch mode
|
||||
npm run build:watch
|
||||
\`\`\`
|
||||
|
||||
## Dependencies
|
||||
|
||||
- Angular 19.2+
|
||||
- TypeScript 5.7+
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
EOF
|
||||
|
||||
# Create package.json
|
||||
cat > "$DEST_DIR/package.json" << EOF
|
||||
{
|
||||
"name": "$LIBRARY_NAME",
|
||||
"version": "1.0.0",
|
||||
"description": "$DESCRIPTION",
|
||||
"keywords": [$(echo "$KEYWORDS" | sed 's/,/", "/g' | sed 's/^/"/' | sed 's/$/"/')],
|
||||
"author": "Your Organization",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/yourorg/$LIBRARY_NAME.git"
|
||||
},
|
||||
"main": "./dist/bundles/$LIBRARY_NAME.umd.js",
|
||||
"module": "./dist/fesm2022/$LIBRARY_NAME.mjs",
|
||||
"es2015": "./dist/fesm2015/$LIBRARY_NAME.mjs",
|
||||
"esm2022": "./dist/esm2022/$LIBRARY_NAME.mjs",
|
||||
"fesm2022": "./dist/fesm2022/$LIBRARY_NAME.mjs",
|
||||
"fesm2015": "./dist/fesm2015/$LIBRARY_NAME.mjs",
|
||||
"typings": "./dist/$LIBRARY_NAME.d.ts",
|
||||
"exports": {
|
||||
"./package.json": {
|
||||
"default": "./package.json"
|
||||
},
|
||||
".": {
|
||||
"types": "./dist/$LIBRARY_NAME.d.ts",
|
||||
"esm2022": "./dist/esm2022/$LIBRARY_NAME.mjs",
|
||||
"esm": "./dist/esm2022/$LIBRARY_NAME.mjs",
|
||||
"default": "./dist/$LIBRARY_NAME.d.ts"
|
||||
}
|
||||
},
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"build": "ng build $LIBRARY_NAME",
|
||||
"build:watch": "ng build $LIBRARY_NAME --watch",
|
||||
"test": "ng test $LIBRARY_NAME",
|
||||
"lint": "ng lint $LIBRARY_NAME"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/common": "^19.2.0",
|
||||
"@angular/core": "^19.2.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^19.2.15",
|
||||
"@angular/cli": "^19.2.15",
|
||||
"@angular/compiler-cli": "^19.2.0",
|
||||
"@types/jasmine": "~5.1.0",
|
||||
"jasmine-core": "~5.6.0",
|
||||
"karma": "~6.4.0",
|
||||
"karma-chrome-launcher": "~3.2.0",
|
||||
"karma-coverage": "~2.2.0",
|
||||
"karma-jasmine": "~5.1.0",
|
||||
"karma-jasmine-html-reporter": "~2.1.0",
|
||||
"ng-packagr": "^19.2.0",
|
||||
"typescript": "~5.7.2"
|
||||
},
|
||||
"sideEffects": false
|
||||
}
|
||||
EOF
|
||||
|
||||
# Create angular.json
|
||||
cat > "$DEST_DIR/angular.json" << EOF
|
||||
{
|
||||
"\$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"$LIBRARY_NAME": {
|
||||
"projectType": "library",
|
||||
"root": ".",
|
||||
"sourceRoot": "src",
|
||||
"prefix": "lib",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:ng-packagr",
|
||||
"options": {
|
||||
"project": "ng-package.json"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"tsConfig": "tsconfig.lib.prod.json"
|
||||
},
|
||||
"development": {
|
||||
"tsConfig": "tsconfig.lib.json"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
"tsConfig": "tsconfig.spec.json",
|
||||
"polyfills": [
|
||||
"zone.js",
|
||||
"zone.js/testing"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
EOF
|
||||
|
||||
# Fix ng-package.json paths
|
||||
sed -i 's|../../node_modules/ng-packagr/ng-package.schema.json|./node_modules/ng-packagr/ng-package.schema.json|g' "$DEST_DIR/ng-package.json"
|
||||
sed -i "s|../../dist/$LIBRARY_NAME|./dist|g" "$DEST_DIR/ng-package.json"
|
||||
|
||||
echo "✅ Successfully extracted $LIBRARY_NAME to $DEST_DIR"
|
||||
echo "📁 Library structure:"
|
||||
ls -la "$DEST_DIR"
|
||||
Reference in New Issue
Block a user