generator-hubble 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Jamie Smith
+
+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.

package/README.md

@@ -0,0 +1,38 @@
+# generator-hubble
+
+A yeoman generator for a lit, tailwind, typescript, rollup hubble
+
+## Installation
+
+Have [node.js](https://nodejs.org/) installed
+
+If you need to install [Yeoman](http://yeoman.io) run:
+
+```bash
+npm i -g yo
+```
+
+To install the generator run:
+
+```bash
+npm i -g generator-hubble
+```
+
+Then to generate, run:
+
+```bash
+yo hubble
+```
+
+or use npx to run the generator without installing it:
+
+```bash
+npx -p yo -p generator-hubble -c 'yo hubble'
+```
+
+## License
+
+[MIT License](./LICENSE)
+
+[npm-image]: https://badge.fury.io/js/generator-hubble.svg
+[npm-url]: https://npmjs.org/package/generator-hubble

package/generators/app/index.js

@@ -0,0 +1,123 @@
+import Generator from 'yeoman-generator';
+import chalk from 'chalk';
+import yosay from 'yosay';
+
+import { exec } from 'child_process';
+import { promisify } from 'util';
+const execute = promisify(exec);
+
+
+export default class extends Generator {
+  	prompting() {
+		
+		this.log(
+			yosay( `Welcome to the ${chalk.blue("hubble")} generator!` )
+		);
+
+
+		const prompts = [
+			{
+				type: "confirm",
+				name: "areYouSure",
+				message: `Would you like to create the project in the current directory?`,
+				default: true
+			},
+			{
+				type: "string",
+				name: "packageName",
+				message: "What's the name of the project?",
+			},
+			{
+				type: "string",
+				name: "elementName",
+				message: "What's the name of the element?",
+				default: this.props.packageName.replace('hubble-', '')
+			},
+			{
+				type: "string",
+				name: "description",
+				message: "What's the description of the project?",
+			},
+			{
+				type: "string",
+				name: "authorName",
+				message: "What's the author's name?",
+			},
+			{
+				type: "string",
+				name: "gitUserName",
+				message: "What's the author's GitHub username?",
+			},
+		];
+
+		return this.prompt(prompts).then(props => {
+			// To access props later use this.props.someAnswer;
+			this.props = props;
+		})
+	}
+
+  	writing() {
+		if(this.props.areYouSure) {
+
+			
+			const NON_TPLS = [
+				'artifacts',
+				'build',
+				'resources/icon.svg',
+				'src/hello-world.ts',
+				'src/tailwind.css',
+				'.gitignore',
+				'rollup.config.js',
+				'tailwind.config.js',
+				'typings.d.ts',
+			  ];
+
+			  const TPLS = [
+				'_index.html',
+				'_package.json',
+				'_README.md',
+			  ];
+		  
+			  NON_TPLS.map((n) => {
+				return this.fs.copy(
+				  this.templatePath(n),
+				  this.destinationPath(n),
+				  this.props);
+			  });
+		  
+			  TPLS.map((n) => {
+				return this.fs.copyTpl(
+				  this.templatePath(n),
+				  this.destinationPath(n.replace(/(_)/gi, '')),
+				  this.props);
+			  });
+		}
+		else {
+			this.log( chalk.red(`🔥 Canceling ${this.props.name}...`) )
+		}
+	}
+
+	async install(){
+		try {
+
+
+			if(!this.props.areYouSure) return undefined;
+
+			this.log( chalk.green(`🎉 Created ${this.props.name} and copied files...`) )
+
+			this.log( `${chalk.blue(`📚 Installing dependencies...`)}` )
+
+			await execute(`cd ${this.props.name} && npm i`);
+
+			this.log( `${chalk.green(`📚 Installed dependencies...`)}` )
+
+			this.log()
+			this.log(`${chalk.blue(`cd ${this.props.name} && npm start`)}` )
+			this.log(`🚀 Run above to go to your new project and start it up` )
+			this.log()
+		}
+		catch (error) {
+			this.log( `🔥 ${chalk.red(`Error Installing: ${error.message}`)}` )
+		}
+	}
+}

package/generators/app/templates/_README.md

@@ -0,0 +1,7 @@
+# <%= packageName %>
+
+<%= description %>
+
+---
+
+A hubble for <https://hubbles.me>

package/generators/app/templates/_index.html

@@ -0,0 +1,10 @@
+<html style="background-color: grey;">
+<head>
+    <title><%= elementName %> Demo</title>
+    <script src="./build/lit.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body style="padding: 0px; margin:0px;">
+    <hello-world></hello-world>
+</body>
+</html>

package/generators/app/templates/_package.json

@@ -0,0 +1,39 @@
+{
+  "name": "<%= packageName %>",
+  "version": "0.0.1",
+  "description": "A hubble to: <%= description %>",
+  "main": "build/lit.js",
+  "author": "<%= authorName %>",
+  "hubbles": {
+    "name": "<%= elementName %>",
+    "description": "<%= description %>",
+    "site": "https://github.com/<%= gitUserName %>/<%= packageName %>",
+    "icon": "https://raw.githubusercontent.com/<%= gitUserName %>/<%= packageName %>/main/resources/icon.svg?raw=true",
+    "executable": "https://unpkg.com/<%= packageName %>@0.0.1/build/lit.js"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build:tw": "tailwindcss -i ./src/tailwind.css -o ./artifacts/tw.css",
+    "build:tw:watch": "npm run build:tw --watch",
+    "build:twlit": "twlit --output ./artifacts/twlit.js --input ./artifacts/tw.css  --watch",
+    "build:twlit:watch": "npm run build:twlit --watch",
+    "build:js": "rollup -c",
+    "build:js:watch": "rollup -c --watch",
+    "build:all": "npm run build:tw && npm run build:twlit && npm run build:js",
+    "dev": "concurrently \"tailwindcss -i ./src/tailwind.css -o ./artifacts/tw.css --watch\" \"twlit --output ./artifacts/twlit.js --input ./artifacts/tw.css  --watch\" \"rollup -c --watch\""
+  },
+  "dependencies": {
+    "lit": "^3.1.1"
+  },
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@web/rollup-plugin-copy": "^0.5.1",
+    "concurrently": "^8.2.2",
+    "rollup": "^4.9.6",
+    "tailwindcss": "^3.4.1",
+    "twlit": "^0.0.1-alpha.37",
+    "typescript": "^4.9.5"
+  }
+}

package/generators/app/templates/resources/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M80-200v-240q0-27 11-49t29-39v-112q0-50 35-85t85-35h160q23 0 43 8.5t37 23.5q17-15 37-23.5t43-8.5h160q50 0 85 35t35 85v112q18 17 29 39t11 49v240h-80v-80H160v80H80Zm440-360h240v-80q0-17-11.5-28.5T720-680H560q-17 0-28.5 11.5T520-640v80Zm-320 0h240v-80q0-17-11.5-28.5T400-680H240q-17 0-28.5 11.5T200-640v80Zm-40 200h640v-80q0-17-11.5-28.5T760-480H200q-17 0-28.5 11.5T160-440v80Zm640 0H160h640Z"/></svg>	

package/generators/app/templates/rollup.config.mjs

@@ -0,0 +1,41 @@
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import typescript from '@rollup/plugin-typescript';
+
+import {copy} from '@web/rollup-plugin-copy';
+import terser from '@rollup/plugin-terser';
+
+// Not installed by default but can be useful:
+//import html from '@web/rollup-plugin-html';
+//import resolve from '@rollup/plugin-node-resolve';
+//import minifyHTML from 'rollup-plugin-minify-html-literals';
+
+export default {
+  input: './src/hello-world.ts',
+  output: {
+    file: './build/lit.js',
+    format: 'esm',
+  },
+  plugins: [
+    nodeResolve(),
+    typescript({
+      compilerOptions: {
+        lib: ["es6", "dom"],
+        target: "es6",
+        experimentalDecorators: true,
+        useDefineForClassFields: false,
+      }
+    }),
+    terser({
+      ecma: 2021,
+      module: true,
+      warnings: true,
+    }),
+    // Optional: copy any static assets to build directory
+    copy({
+      patterns: [
+        'resources/**/*',
+        'package.json',
+      ],
+    }),
+  ]
+};

package/generators/app/templates/src/hello-world.ts

@@ -0,0 +1,51 @@
+import { LitElement, html } from "lit";
+import { customElement, } from 'lit/decorators.js';
+import { TWStyles } from "../artifacts/twlit.js";
+
+
+@customElement('hello-world')
+class HelloWorld extends LitElement {
+
+	static styles = [TWStyles];
+
+	static properties = {};
+
+	_init = false;
+
+	constructor() {
+		super();
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		if(!this._init) {
+			this._initialize();
+			this._init = true;
+		}
+	}
+
+	private _initialize() {
+	}
+
+	render() {
+		return getHtml();
+	}
+	
+}
+
+function getHtml() {
+return html`
+<div class="flex justify-center items-center h-screen">
+	<div class="max-w-xl bg-white rounded-lg shadow-lg overflow-hidden">
+		Hello World
+	</div>
+</div>
+`;
+}
+
+
+declare global {
+	interface HTMLElementTagNameMap {
+	  "hello-world": HelloWorld;
+	}
+}

package/generators/app/templates/src/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind utilities;
+@tailwind components;

package/generators/app/templates/tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./src/*.{html,js,ts}",
+    "./src/**/*.{html,js,ts}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+

package/generators/app/templates/typings.d.ts

@@ -0,0 +1,5 @@
+interface StarterListItem {
+    name: string;
+    isAvailable: boolean;
+    moddate: Date;
+}

package/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "generator-hubble",
+  "type": "module",
+  "version": "0.0.1",
+  "description": "A yeoman generator to easily create a lit-element project with tailwindcss and typescript",
+  "homepage": "https://github.com/jsmithdev/generator-hubble",
+  "author": {
+    "name": "jsmithdev",
+    "email": "hubble@jsmith.dev",
+    "url": "https://github.com/jsmithdev/generator-hubble"
+  },
+  "files": [
+    "generators"
+  ],
+  "main": "generators/index.js",
+  "keywords": [
+    "lit",
+    "tailwind",
+    "typescript",
+    "yeoman",
+    "generator",
+    "yeoman-generator"
+  ],
+  "devDependencies": {
+    "coveralls": "^3.0.7",
+    "eslint": "^6.6.0",
+    "eslint-config-prettier": "^6.6.0",
+    "eslint-config-xo": "^0.27.2",
+    "eslint-plugin-prettier": "^3.1.1",
+    "husky": "^3.0.9",
+    "jest": "^26.1.0",
+    "lint-staged": "^9.4.3",
+    "prettier": "^1.19.1",
+    "yeoman-assert": "^3.1.1",
+    "yeoman-test": "^6.3.0"
+  },
+  "engines": {
+    "npm": ">= 4.0.0"
+  },
+  "dependencies": {
+    "chalk": "^2.1.0",
+    "yeoman-generator": "^5.6.1",
+    "yosay": "^2.0.2"
+  },
+  "jest": {
+    "testEnvironment": "node"
+  },
+  "lint-staged": {
+    "*.js": [
+      "eslint --fix",
+      "git add"
+    ],
+    "*.json": [
+      "prettier --write",
+      "git add"
+    ]
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "eslintConfig": {
+    "extends": [
+      "xo",
+      "prettier"
+    ],
+    "env": {
+      "jest": true,
+      "node": true
+    },
+    "rules": {
+      "prettier/prettier": "off"
+    },
+    "plugins": [
+      "prettier"
+    ]
+  },
+  "scripts": {
+    "pretest": "eslint .",
+    "test": "jest"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jsmithdev/generator-hubble"
+  },
+  "license": "MIT"
+}