Installation

# npm
npm i@CymbolTech/colorassembly
 
# yarn
yarn add @cymbol/colorassembly
 
# pnpm
pnpm add @cymbol/colorassembly

@cymbol:registry=https://npm.pkg.github.com

<script src="https://cdn.jsdelivr.net/npm/@cymbol/colorassembly/dist/wasm_exec.js"></script>
<script type="module">
  import loadColorAssembly from 'https://cdn.jsdelivr.net/npm/@cymbol/colorassembly/dist/index.js';
  
  const api = await loadColorAssembly({
    wasmPath: 'https://cdn.jsdelivr.net/npm/@cymbol/colorassembly/dist/color-assembly.wasm'
  });
</script>

import { loadColorAssembly } from '@cymbol/colorassembly';
 
const api = await loadColorAssembly();

// webpack.config.js
module.exports = {
  experiments: {
    asyncWebAssembly: true,
  },
  module: {
    rules: [
      {
        test: /\.wasm$/,
        type: 'asset/resource',
      },
    ],
  },
};

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.experiments = {
      ...config.experiments,
      asyncWebAssembly: true,
    };
    return config;
  },
};
 
module.exports = nextConfig;

const api = await loadColorAssembly({
  wasmPath: '/assets/color-assembly.wasm'
});

import { loadColorAssembly } from '@cymbol/colorassembly';
 
async function test() {
  const api = await loadColorAssembly();
  
  const rgb = { r: 255, g: 128, b: 0 };
  const hsl = api.transforms.rgbToHsl(rgb);
  
  console.log('RGB:', rgb);
  console.log('HSL:', hsl);
  console.log('✅ ColorAssembly is working!');
}
 
test();