Added some post install messaging, scaffolding, and small QoL tweaks …

…to logging
stolksdorf · Oct 19, 2020 · 21f4974 · 21f4974
1 parent 4b7faae
commit 21f4974
Show file tree

Hide file tree

Showing 10 changed files with 118 additions and 37 deletions.
diff --git a/lib/pack.js b/lib/pack.js
@@ -56,14 +56,14 @@ module.exports = async (entrypoint, _opts={})=>{
 	if(!!opts.dev) sourceMaps.install();
 
 	const pack = async ()=>{
-		console.time(chalk.cyan('bundled'));
+		console.time(chalk.cyan(`bundled ${entrypoint}`));
 		if(!LibsCache) LibsCache = await runBundler(browserify().require(opts.libs));
 		const Core = await runBundler(bundler);
 
 		const renderAsString = `;const comp=module.exports;${!!opts.dev ? 'delete require.cache[__filename];' : ''};module.exports=(props)=>require('react-dom/server').renderToString(require('react').createElement(comp, props))`;
 		const clientSideHydrate = `;start_app=(props={},target=document.getElementsByTagName('main')[0])=>require('react-dom').hydrate(require('react').createElement(${opts.name}, props),target);`
 
-		console.timeEnd(chalk.cyan('bundled'));
+		console.timeEnd(chalk.cyan(`bundled ${entrypoint}`));
 		return {
 			bundle : LibsCache + Core + clientSideHydrate,
 			ssr    : Core + renderAsString,

diff --git a/lib/simple.server.js b/lib/simple.server.js
@@ -15,7 +15,6 @@ const getMIMEType = (ext)=>{
 		'.png': 'image/png',
 		'.jpg': 'image/jpeg',
 		'.jpeg': 'image/jpeg',
-		'.wav': 'audio/wav',
 		'.mp3': 'audio/mpeg',
 		'.svg': 'image/svg+xml',
 		'.pdf': 'application/pdf',
@@ -37,7 +36,7 @@ const getFile = async (pathname, rootDir)=>{
 	try{
 		return { ext, contents : await fs.readFile(loc), loc }
 	}catch(err){
-		console.log(err);
+		if(!loc.endsWith('favicon.ico')) console.log(err);
 		return { ext : false, contents : false, loc };
 	}
 };

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vitreum",
-  "version": "6.0.2",
+  "version": "6.0.3",
   "description": "Web app build system using Browserify and React",
   "main": "lib/index.js",
   "repository": {
@@ -13,7 +13,8 @@
     "setup_test_proj": "cd ../vitreum_test && npm init -y && node ../vitreum/scripts/install_proj_libs.js && npm link vitreum",
     "setup": "npm link && node scripts/install_peer_libs.js && npm run setup_test_proj",
     "test": "pico-check",
-    "test:dev": "pico-check -w -b"
+    "test:dev": "pico-check -w -b",
+    "postinstall": "node utils/postinstall.js"
   },
   "author": "Scott Tolksdorf <[email protected]> (https://github.com/stolksdorf)",
   "license": "MIT",
@@ -23,7 +24,7 @@
   "homepage": "https://github.com/stolksdorf/vitreum",
   "dependencies": {
     "browserify": "^16.5.0",
-    "fs-extra": "^9.0.0",
+    "fs-extra": "^9.0.1",
     "livereload": "^0.9.1",
     "nodemon": "^2.0.2",
     "source-map-support": "^0.5.16",

diff --git a/recipes/embed.recipe.js b/recipes/embed.recipe.js
@@ -6,9 +6,6 @@ This is useful if you want to simply upload a webapp to S3 to host it.
 We are using the base64encode transform here that will detect the filetype you are trying to require
 and create a base64 url from it and return it as a string, embedding the entire content of the file
 into your bundle
-
-
-
 */
 
 const fs = require('fs-extra');
@@ -29,10 +26,9 @@ const transforms = {
 };
 
 const build = async ({ bundle, render })=>{
-
 	const props = { title : 'embed'};
 	const body = render(props);
-	await fs.outputFile('./build/embed.html', html({
+	await fs.outputFile('./build/index.html', html({
 		head : `
 			${headtags.generate()}
 			<style>${cssTransform.generate()}</style>
@@ -52,4 +48,8 @@ pack('./src/main.jsx', {
 .then(build)
 .catch((err)=>console.log(err));
 
-if(isDev) livereload('./build');
+
+if(isDev){
+	livereload('./build');
+	server('./build');
+}
diff --git a/recipes/server/renderPage.js b/recipes/server/renderPage.js
diff --git a/recipes/server/server.js b/recipes/server/server.js
@@ -2,14 +2,29 @@ const express = require('express');
 const server  = express();
 server.use(express.static(__dirname + '/../build'));
 
-const renderMain = require('./renderPage.js');
+const renderMain = (props)=>{
+	return `<!DOCTYPE html>
+<!-- Doctype HTML5 -->
+<html lang='en'>
+	<head>
+		<meta charset='utf-8'>
+		<meta name='viewport' content='width=device-width, initial-scale=1'>
+		<link href='/bundle.css' rel='stylesheet'></link>
+	</head>
+	<body>
+		<main>${require('../build/ssr.js')(props)}</main>
+	</body>
+	<script src='/bundle.js'></script>
+	<script>start_app(${JSON.stringify(props)})</script>
+</html>`;
+
+}
 
 server.get('/', (req, res)=>{
 	const props = {title : 'ssr'}
 	return res.send(renderMain(props));
 });
 
-
 server.listen(8000, ()=>{
 	console.log('_____________________________');
 	console.log(`server running on port: 8000 🔔`);

diff --git a/recipes/ssr.recipe.js b/recipes/ssr.recipe.js
@@ -20,6 +20,7 @@ const assetTransform = require('../../vitreum/transforms/asset.js');
 
 const transforms = {
 	'.less' : lessTransform,
+	'.css' : lessTransform,
 	'*': assetTransform('./build')
 };
 

diff --git a/utils/postinstall.js b/utils/postinstall.js
@@ -0,0 +1,8 @@
+const chalk = require('./chalk.js');
+const pckg = require('../package.json');
+const peerDeps = Object.keys(pckg.peerDependencies).join(' ');
+
+console.log(chalk.green('\nBe sure to install the needed peer dependencies:'));
+console.log(chalk.cyan(`npm install ${peerDeps}`));
+
+console.log(`\nUse ${chalk.cyan(`node node_modules/vitreum/utils/scaffold.js`)} to quickly setup your project.`)
diff --git a/utils/scaffold.js b/utils/scaffold.js
@@ -0,0 +1,75 @@
+// Populates a project file with a vitreum setup
+
+
+
+
+//Create client.jsx /less
+//create scripts folder
+  //bundle.script
+  //build.script
+  //simple.server.js
+
+//server
+  //server.js + renderpage
+
+// add npm run scripts to package.json
+
+// console out the npm installs you need
+
+
+//
+
+
+const fse = require('fs-extra');
+
+const root = process.cwd();
+
+
+fse.outputFileSync(`${root}/src/main.jsx`, `require('./main.less');
+const React = require('react');
+
+const { Title } = require('vitreum/headtags');
+
+function Main({ ...props }){
+	return <div className='Main'>
+		<Title>Main Page</Title>
+		<section>
+			<div>Main Ready</div>
+		</section>
+	</div>
+};
+
+module.exports = Main;`);
+console.log(`Created: ${root}/src/main.jsx`);
+
+fse.outputFileSync(`${root}/src/main.less`, `.Main {
+	font-family: Roboto;
+}`);
+console.log(`Created: ${root}/src/main.jsx`);
+
+
+
+
+
+const bundleRecipe = fse.readFileSync(`${__dirname}/../recipes/embed.recipe.js`, 'utf8').replace(/\.\.\/\.\.\/vitreum/g, 'vitreum');
+fse.outputFileSync(`${root}/scripts/bundle.script.js`, bundleRecipe);
+console.log(`Created: ${root}/scripts/bundle.script.js`);
+
+
+const buildRecipe = fse.readFileSync(`${__dirname}/../recipes/ssr.recipe.js`, 'utf8').replace(/\.\.\/\.\.\/vitreum/g, 'vitreum');
+fse.outputFileSync(`${root}/scripts/build.script.js`, buildRecipe);
+console.log(`Created: ${root}/scripts/build.script.js`);
+
+
+fse.copySync(`${__dirname}/../recipes/server/server.js`, `${root}/server/server.js` )
+console.log(`Created: ${root}/server/server.js`);
+
+
+const pckg = require(`${root}/package.json`);
+pckg.scripts.build = 'node scripts/bundle.script.js';
+pckg.scripts.dev = 'node scripts/bundle.script.js --dev';
+fse.outputJsonSync(`${root}/package.json`, pckg, {spaces : 2});
+console.log('Updated package.json scripts');
+
+
+require('./postinstall.js')