@gluwa/frontend-util

@gluwa/frontend-util is JavaScript utility library for Gluwa frontend projects

Publishing Process

Version Control Flow

1. Feature Branch

   • Update version in package.json (e.g., 1.0.1)
   • Follow SemVer guidelines:
     • MAJOR: incompatible API changes
     • MINOR: backward compatible features
     • PATCH: backward compatible fixes

2. Dev Branch

   • Merge Feature → Dev
   • Automatic RC version publish
   • Example: 1.0.1-rc.1, 1.0.1-rc.2, etc.

3. Main Branch

   • Merge Dev → Main
   • Automatic stable version publish
   • Example: 1.0.1

Installing Packages

# Latest Stable Version
npm install @gluwa/frontend-util
yarn add @gluwa/frontend-util
pnpm add @gluwa/frontend-util
bun add @gluwa/frontend-util

# Release Candidate Version
npm install @gluwa/frontend-util@rc
yarn add @gluwa/frontend-util@rc
pnpm add @gluwa/frontend-util@rc
bun add @gluwa/frontend-util@rc

Checking Versions

# Check RC Version
npm view @gluwa/frontend-util@rc version

Usage Examples

React Functional Component

import { getYear } from "@gluwa/frontend-util";
import { useEffect, useState } from "react";

export default function Footer() {
  const [year, setYear] = useState<number | null>(null);

  useEffect(() => {
    async function fetchYear() {
      try {
        const fetchedYear = await getYear();
        setYear(fetchedYear);
      } catch (err) {
        setYear(null);
        console.error(err);
      }
    }

    fetchYear();
  }, []);

  return (
    <footer>
      <p>© Copyright {year ?? ""} Gluwa™</p>
    </footer>
  );
}

React Class Component

import { getYear } from "@gluwa/frontend-util";
import React, { Component } from "react";

class Footer extends Component {
  state = {
    year: null,
  };

  async componentDidMount() {
    try {
      const fetchedYear = await getYear();
      this.setState({ year: fetchedYear });
    } catch (err) {
      this.setState({ year: null });
      console.error(err);
    }
  }

  render() {
    const { year } = this.state;
    return (
      <footer>
        <p>© Copyright {year ?? ""} Gluwa™</p>
      </footer>
    );
  }
}

export default Footer;

Development & Testing Guide

How to test in a local project

1. Finish code updates

• Follow SemVer guidelines:
  • MAJOR: incompatible API changes
  • MINOR: backward compatible features
  • PATCH: backward compatible fixes

2. Build

npm run build

3. Create a tarball

npm pack

A file like gluwa-frontend-util-1.2.3.tgz will be generated in the project root.

4. Install in a consuming project

npm i {...}/frontend-util/gluwa-frontend-util-1.2.3.tgz

Test Coverage

You can run the coverage locally and check the report.

npm run coverage

• Creation location: coverage/

  • coverage/lcov-report/index.html (HTML report)
  • coverage/lcov.info (LCOV format)
  • coverage/coverage-final.json (JSON)
  • coverage/clover.xml (Clover)

• Open HTML report on macOS:

open coverage/lcov-report/index.html

• Thresholds and collection rules are defined in jest.config.cjs (for src/** files, functions ≥ 90%):

// jest.config.cjs (excerpt)
coverageDirectory: 'coverage',
coverageThreshold: {
  "./src/**": {
    functions: 90,
  }
}

How to check version history

npm view @gluwa/frontend-util versions

• Output

[
  '1.0.0',      '1.0.1',       '1.0.2',
  '1.0.3',      '1.0.4',       '1.0.5',
  '1.0.6',      '1.0.7',       '1.0.8',
  '1.0.9',      '1.0.10-rc.1', '1.0.10-rc.2',
  '1.1.0-rc.3', '1.2.0-rc.1',  '1.2.0-rc.2',
  '1.2.0-rc.3', '1.2.0-rc.4',  '1.2.0',
  '1.2.1-rc.1', '1.2.1-rc.2',  '1.2.1',
  '1.2.2-rc.1', '1.2.2-rc.2',  '1.2.2',
  '1.2.3-rc.1', '1.2.3-rc.2',  '1.2.3-rc.3',
  '1.2.3-rc.4', '1.2.3-rc.5',  '1.2.3-rc.6',
  '1.2.3'
]