@gluwa/frontend-util v1.2.3

@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;