@creuna/codegen

codegen

This package has utilities for generating javascript files.

API

• createComponentsFile(options)
• createPagesFile(options)
• createPathsFile(options)

These functions all take the same options object.

The functions read a provided directory and look for react components. All found components that have an index.js file and use the same name for the .jsx file and the containing folder name will be included in the generated files. The content of the generated files depends on what function is used.

Example file tree

/
  components
    component
      component.jsx
      index.js
    other-component
      blabla.jsx
      index.js
    another-component
      another-component.jsx

In this example, only component will be included. blabla.jsx does not match other-component, and another-component lacks an index.js file.

Options

• fileHeader: String = "// NOTE: Do not edit this file. It is automatically generated." (String prepended to the generated file)

• fileName: String (Name of the file to write)

• outputPath: String (Full path to the folder in which to write the file)

• prettierOptions: Object (Prettier options object, used to format the output file)

• searchPath: String (The path in which to look for components)

• fileExtension: String (The file extension you are working with. It will change the import style of the components. Written in the form .[fileExtension]. It defaults to '.jsx') (For example: '.tsx'.)

createComponentsFile

const { createComponentsFile } = require("@creuna/codegen");
const path = require("path");

createComponentsFile({
  searchPath: path.join(__dirname, "components"),
  fileName: "app.components.js",
  outputPath: __dirname,
  fileExtension: '.tsx'
});

app.components.js

// NOTE: Do not edit this file. It is automatically generated.
import Component from "./components/component";

export { Component };

createPagesFile

This function is inteded for use with static site generation. All valid components will be imported, parsed for metadata and exported from the resulting javascript file. The function supports passing metadata in comments using yaml syntax.

Example page component

/*
group: Eksempelgruppe
name: Eksempelside
path: /eksempelside
*/
import React from "react";
const ExamplePage = () => <div />;
export default ExamplePage;

createPagesFile

const { createPagesFile } = require("@creuna/codegen");
const path = require("path");

createPagesFile({
  fileName: "pages.js",
  searchPath: path.join(__dirname, "pages"),
  outputPath: __dirname,
  fileExtension: '.jsx'
});

pages.js

// NOTE: Do not edit this file. It is automatically generated.
import ExamplePage from "./example-page";

export default [
  {
    component: ExamplePage,
    group: "Eksempelgruppe",
    name: "Eksempelside",
    path: "/eksempelside"
  }
];

createPathsFile

This function is inteded for use with react-router. The generated file exports an array of paths (using commonJs syntax) that can be fed to react-router. yaml comments are respected.

Example page component

/*
path: /some-path
*/
import React from "react";
const ExamplePage = () => <div />;
export default ExamplePage;

createPathsFile

const { createPathsFile } = require("@creuna/codegen");
const path = require("path");

createPagesFile({
  fileName: "paths.js",
  searchPath: path.join(__dirname, "pages"),
  outputPath: __dirname
});

paths.js

// NOTE: Do not edit this file. It is automatically generated.
module.exports = ["/some-path"];