onlybuild 1.2.1 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## [v1.4.0](https://github.com/neogeek/onlybuild/tree/v1.4.0) - (2024-05-08)
+
+[Full Changelog](https://github.com/neogeek/onlybuild/compare/v1.3.0...v1.4.0)
+
+- [feat] Switch typescript work without a flag. [#18](https://github.com/neogeek/onlybuild/pull/18)
+- [feat] TSX/React.js Support [#17](https://github.com/neogeek/onlybuild/pull/17)
+- [hotfix] Fixed TypeScript logic to not override JavaScript functionality. [#16](https://github.com/neogeek/onlybuild/pull/16)
+
+## [v1.3.0](https://github.com/neogeek/onlybuild/tree/v1.3.0) - (2024-05-08)
+
+[Full Changelog](https://github.com/neogeek/onlybuild/compare/v1.2.1...v1.3.0)
+
+- [hotfix] Updated packages. [#15](https://github.com/neogeek/onlybuild/pull/15)
+- [feat] Added TypeScript support. (experimental) [#14](https://github.com/neogeek/onlybuild/pull/14)
+- [hotfix] Added experimental code coverage flag to test command. [#13](https://github.com/neogeek/onlybuild/pull/13)
+- [feat] Split build and copy logic into separate methods. [#12](https://github.com/neogeek/onlybuild/pull/12)
+
 ## [v1.2.1](https://github.com/neogeek/onlybuild/tree/v1.2.1) - (2024-05-07)
 
 [Full Changelog](https://github.com/neogeek/onlybuild/compare/v1.2.0...v1.2.1)

package/README.md

@@ -32,6 +32,8 @@
 - [Getting Started](#getting-started)
 - [File Structure](#file-structure)
 - [Ignore Files](#ignore-files)
+- [React](#react)
+- [TypeScript](#typescript)
 - [Formatting Files](#formatting-files)
 - [Watching For Changes](#watching-for-changes)
 - [Local Server](#local-server)
@@ -262,6 +264,43 @@ screenshot.png
 LICENSE
 ```
 
+## React
+
+If you want to use [React.js](https://react.dev/), instead of <code>&#96;html&#96;</code> string templates, you can do that by using `react-dom/server` in a `.jsx` or `.tsx` file.
+
+```javascript
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+
+function Hello() {
+  return <h1>Hello, React!</h1>;
+}
+
+export default renderToString(<Hello />);
+```
+
+In order for `.jsx` or `.tsx` files to work property you will need to add `"type": "module"` to your `package.json`.
+
+```json
+{
+  ...
+  "type": "module",
+  ...
+}
+```
+
+## TypeScript
+
+In order for TypeScript files to work property you will need to add `"type": "module"` to your `package.json`.
+
+```json
+{
+  ...
+  "type": "module",
+  ...
+}
+```
+
 ## Formatting Files
 
 If you want to reformat the HTML files in the build directory, you can use [Prettier](https://prettier.io/) after the build completes.
@@ -327,6 +366,7 @@ Serving the files once the build is complete is easy using the NPM package [http
 1. [External API](./examples/external-api/) - Output data fetched from an external API.
 1. [<code>&#96;html&#96;</code> String Template](./examples/html-string-template/) - Use the <code>&#96;html&#96;</code> string template utility to add syntax highlighting to HTML.
 1. [Includes](./examples/includes/) - An example that uses reusable includes for building multiple pages.
+1. [React.js](./examples/react.js/) - An example using React.js to render HTML.
 
 ## Benchmark
 

package/dist/bin/index.d.ts

@@ -1,3 +1,4 @@
 #!/usr/bin/env node --no-warnings
 import 'dotenv/config';
+import 'tsx/esm';
 export {};

package/dist/bin/index.js

@@ -1,8 +1,9 @@
 #!/usr/bin/env node --no-warnings
 import 'dotenv/config';
+import 'tsx/esm';
 import { globby } from 'globby';
 import parseCmdArgs from 'parse-cmd-args';
-import { buildFiles } from '../src/build.js';
+import { buildFiles, writeFiles } from '../src/build.js';
 import { copyFiles } from '../src/copy.js';
 import pkg from '../package.json' assert { type: 'json' };
 const args = parseCmdArgs(null, {
@@ -30,14 +31,25 @@ const [buildDir = 'build/'] = [args.flags['--out'], args.flags['-o']]
 const [ignoreFile = '.onlyignore'] = [args.flags['--ignore'], args.flags['-i']]
     .filter(flag => typeof flag === 'string')
     .map(String);
-await buildFiles(await globby(['**/*.mjs', '!_*/**/*', '!node_modules/', `!${buildDir}`], {
+const filesToBuild = await globby([
+    '**/*.mjs',
+    '**/*.jsx',
+    '**/*.ts',
+    '**/*.tsx',
+    '!_*/**/*',
+    '!node_modules/',
+    `!${buildDir}`
+].filter(Boolean), {
     gitignore: false,
     ignoreFiles: [ignoreFile],
     cwd: args.inputs[0]
-}), buildDir);
-await copyFiles(await globby([
+});
+const filesToCopy = await globby([
     '**/*',
     '!**/*.mjs',
+    '!**/*.jsx',
+    '!**/*.ts',
+    '!**/*.tsx',
     '!_*/**/*',
     '!package.json',
     '!package-lock.json',
@@ -47,4 +59,6 @@ await copyFiles(await globby([
     gitignore: false,
     ignoreFiles: [ignoreFile],
     cwd: args.inputs[0]
-}), buildDir);
+});
+await writeFiles(await buildFiles(filesToBuild), buildDir);
+await copyFiles(filesToCopy, buildDir);

package/dist/package.json

@@ -1,7 +1,7 @@
 {
     "name": "onlybuild",
     "description": "A zero-config cli for building static websites.",
-    "version": "1.2.1",
+    "version": "1.4.0",
     "engines": {
         "node": ">=20.x"
     },
@@ -19,15 +19,15 @@
     "dependencies": {
         "dotenv": "16.4.5",
         "globby": "14.0.1",
-        "parse-cmd-args": "5.0.2"
+        "parse-cmd-args": "5.0.2",
+        "tsx": "4.9.3"
     },
     "devDependencies": {
-        "@types/node": "20.12.10",
-        "tsx": "4.9.3",
+        "@types/node": "20.12.11",
         "typescript": "5.4.5"
     },
     "scripts": {
-        "test": "node --import tsx --test ./src/*.test.ts",
+        "test": "node --import tsx --test --experimental-test-coverage ./src/*.test.ts",
         "build": "rm -rf dist/ && tsc && chmod +x ./dist/bin/index.js",
         "prepare": "npm run build"
     },

package/dist/src/build.d.ts

@@ -1,22 +1,43 @@
 /**
- * Write the file to the build directory while creating the directory, recursively, if it doesn't exist.
+ * Calculates the output path of the file based on the original input path.
  *
  * @param {string} path
- * @param {string} buildDir
- * @param {string} contents
  */
-export declare const writeFileAndMakeDir: (path: string, buildDir: string, contents: string) => Promise<void>;
+export declare const calculateOutputPathFromInputPath: (path: string) => string;
 /**
- * Import the default export of a JavaScript file and check that the default export is a string before writing the contents to a build file.
+ * Returns the default export if it is a string.
  *
  * @param {string} path
- * @param {string} buildDir
+ * @returns {Promise<{ path: string; contents: string }>}
  */
-export declare const buildFile: (path: string, buildDir: string) => Promise<void>;
+export declare const buildFile: (path: string) => Promise<{
+    path: string;
+    contents: string;
+}>;
 /**
- * Iterate over all the file paths and write them to the build directory.
+ * Iterate over all file paths and returns the default export for each file if it is a string.
  *
  * @param {string[]} paths
+ * @returns {Promise<{ path: string; contents: string }[]>}
+ */
+export declare const buildFiles: (paths: string[]) => Promise<{
+    path: string;
+    contents: string;
+}[]>;
+/**
+ * Writes the contents of a file to a path, creating parent directories as needed.
+ *
+ * @param {string} path
+ * @param {string} contents
+ */
+export declare const writeFileAndMakeDir: (path: string, contents: string) => Promise<void>;
+/**
+ * Write files to the build directory.
+ *
+ * @param {{ path: string; contents: string }[]} files,
  * @param {string} buildDir
  */
-export declare const buildFiles: (paths: string[], buildDir: string) => Promise<void>;
+export declare const writeFiles: (files: {
+    path: string;
+    contents: string;
+}[], buildDir: string) => Promise<void>;

package/dist/src/build.js

@@ -1,38 +1,52 @@
 import { writeFile, mkdir } from 'node:fs/promises';
-import { basename, dirname, join, resolve } from 'node:path';
+import { dirname, join, parse, resolve } from 'node:path';
 /**
- * Write the file to the build directory while creating the directory, recursively, if it doesn't exist.
+ * Calculates the output path of the file based on the original input path.
  *
  * @param {string} path
- * @param {string} buildDir
- * @param {string} contents
  */
-export const writeFileAndMakeDir = async (path, buildDir, contents) => {
-    const filename = basename(path, '.mjs');
-    const directory = filename === 'index'
-        ? join(buildDir, dirname(path))
-        : join(buildDir, dirname(path), filename);
-    await mkdir(directory, { recursive: true });
-    await writeFile(join(directory, 'index.html'), contents);
+export const calculateOutputPathFromInputPath = (path) => {
+    const filename = parse(path).name;
+    const directory = filename === 'index' ? dirname(path) : join(dirname(path), filename);
+    return join(directory, 'index.html');
 };
 /**
- * Import the default export of a JavaScript file and check that the default export is a string before writing the contents to a build file.
+ * Returns the default export if it is a string.
  *
  * @param {string} path
- * @param {string} buildDir
+ * @returns {Promise<{ path: string; contents: string }>}
  */
-export const buildFile = async (path, buildDir) => {
+export const buildFile = async (path) => {
     const contents = (await import(resolve(path))).default;
-    if (typeof contents === 'string') {
-        await writeFileAndMakeDir(path, buildDir, contents);
-    }
+    return { path, contents: typeof contents === 'string' ? contents : '' };
 };
 /**
- * Iterate over all the file paths and write them to the build directory.
+ * Iterate over all file paths and returns the default export for each file if it is a string.
  *
  * @param {string[]} paths
+ * @returns {Promise<{ path: string; contents: string }[]>}
+ */
+export const buildFiles = async (paths) => {
+    return (await Promise.all(paths.map(async (path) => await buildFile(path)))).filter(({ contents }) => contents !== '');
+};
+/**
+ * Writes the contents of a file to a path, creating parent directories as needed.
+ *
+ * @param {string} path
+ * @param {string} contents
+ */
+export const writeFileAndMakeDir = async (path, contents) => {
+    await mkdir(dirname(path), { recursive: true });
+    await writeFile(path, contents);
+};
+/**
+ * Write files to the build directory.
+ *
+ * @param {{ path: string; contents: string }[]} files,
  * @param {string} buildDir
  */
-export const buildFiles = async (paths, buildDir) => {
-    await Promise.all(paths.map(async (path) => await buildFile(path, buildDir)));
+export const writeFiles = async (files, buildDir) => {
+    await Promise.all(files.map(async (file) => {
+        await writeFileAndMakeDir(join(buildDir, calculateOutputPathFromInputPath(file.path)), file.contents);
+    }));
 };

package/dist/src/copy.d.ts

@@ -1,12 +1,12 @@
 /**
- * Copy the file to the build directory while creating the directory, recursively, if it doesn't exist.
+ * Copies a file from one path to another, creating parent directories as needed.
  *
- * @param {string} path
- * @param {string} buildDir
+ * @param {string} src
+ * @param {string} dest
  */
-export declare const copyFileAndMakeDir: (path: string, buildDir: string) => Promise<void>;
+export declare const copyFileAndMakeDir: (src: string, dest: string) => Promise<void>;
 /**
- * Iterate over all the file paths and copy them to the build directory.
+ * Iterate over all file paths and copy them to the build directory.
  *
  * @param {string[]} paths
  * @param {string} buildDir

package/dist/src/copy.js

@@ -1,21 +1,21 @@
 import { copyFile, mkdir } from 'node:fs/promises';
 import { dirname, join } from 'node:path';
 /**
- * Copy the file to the build directory while creating the directory, recursively, if it doesn't exist.
+ * Copies a file from one path to another, creating parent directories as needed.
  *
- * @param {string} path
- * @param {string} buildDir
+ * @param {string} src
+ * @param {string} dest
  */
-export const copyFileAndMakeDir = async (path, buildDir) => {
-    await mkdir(join(buildDir, dirname(path)), { recursive: true });
-    await copyFile(path, join(buildDir, path));
+export const copyFileAndMakeDir = async (src, dest) => {
+    await mkdir(dirname(dest), { recursive: true });
+    await copyFile(src, dest);
 };
 /**
- * Iterate over all the file paths and copy them to the build directory.
+ * Iterate over all file paths and copy them to the build directory.
  *
  * @param {string[]} paths
  * @param {string} buildDir
  */
 export const copyFiles = async (paths, buildDir) => {
-    await Promise.all(paths.map(async (path) => await copyFileAndMakeDir(path, buildDir)));
+    await Promise.all(paths.map(async (path) => await copyFileAndMakeDir(path, join(buildDir, path))));
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "onlybuild",
   "description": "A zero-config cli for building static websites.",
-  "version": "1.2.1",
+  "version": "1.4.0",
   "engines": {
     "node": ">=20.x"
   },
@@ -19,15 +19,15 @@
   "dependencies": {
     "dotenv": "16.4.5",
     "globby": "14.0.1",
-    "parse-cmd-args": "5.0.2"
+    "parse-cmd-args": "5.0.2",
+    "tsx": "4.9.3"
   },
   "devDependencies": {
-    "@types/node": "20.12.10",
-    "tsx": "4.9.3",
+    "@types/node": "20.12.11",
     "typescript": "5.4.5"
   },
   "scripts": {
-    "test": "node --import tsx --test ./src/*.test.ts",
+    "test": "node --import tsx --test --experimental-test-coverage ./src/*.test.ts",
     "build": "rm -rf dist/ && tsc && chmod +x ./dist/bin/index.js",
     "prepare": "npm run build"
   },