Skip to content

The Trinsic Javascript / Web SDK

The Trinsic Web SDK makes it easy to interact with the Trinsic API from any client-side web application. You can find the SDKs source on Github.

Installation

Install the package for Node or Browser from npmjs.com

npm install @trinsic/trinsic

Configuration

You can find a basic Webpack 4 sample here.

The library works without any further configuration in Webpack 4.

Package import

Import the library using @trinsic/trinsic/lib/browser.

You can find a basic Create React App 4 sample here.

You will have to extend the Create React App Webpack configuration to allow the included wasm bundle to be loaded.

Package import

Import the library using @trinsic/trinsic/lib/browser.

  1. Install the @craco/craco package in case you're not yet using craco
    npm install @craco/craco --save-exact --save-dev
    
  2. Adjust your package.json scripts to the below:
    "scripts": {
        "start": "craco start",
        "build": "craco build",
        "test": "craco test",
        "eject": "react-scripts eject"
    }
    
  3. Add a craco.config.js file next to the package.json file with the following configuration:
    const { addBeforeLoader, loaderByName } = require('@craco/craco');
    module.exports = {
        webpack: {
            configure: (webpackConfig) => {
                const wasmExtensionRegExp = /\.wasm$/;
    
                webpackConfig.module.rules.forEach((rule) => {
                    (rule.oneOf || []).forEach((oneOf) => {
                    if (oneOf.loader && oneOf.loader.indexOf('file-loader') >= 0) {
                        oneOf.exclude.push(wasmExtensionRegExp);
                    }
                    });
                });
    
                return webpackConfig;
            },
        },
    };
    

You can find a basic Webpack 5 sample here.

Package import

Import the library using @trinsic/trinsic/browser.

You will have to enable the asyncWebAssembly experiment in Webpack 5.

  1. Adjust your webpack.config.js:
    experiments: {
        asyncWebAssembly: true,
    },
    

You can find a basic Create React App 5 sample here.

Package import

Import the library using @trinsic/trinsic/browser.

You will have to extend the Create React App Webpack configuration to allow the included wasm bundle to be loaded.

  1. Install the @craco/craco dependency in case you're not yet using craco
    npm install @craco/craco --save-exact --save-dev
    
  2. Adjust your package.json scripts to the below:
    "scripts": {
        "start": "craco start",
        "build": "craco build",
        "test": "craco test",
        "eject": "react-scripts eject"
    }
    
  3. Add a craco.config.js file next to the package.json file with the following configuration:
    module.exports = {
        webpack: {
            configure: (webpackConfig) => {
                webpackConfig.experiments = {
                    asyncWebAssembly: true
                };
    
                const wasmExtensionRegExp = /\.wasm$/;
                webpackConfig.module.rules.forEach((rule) => {
                    (rule.oneOf || []).forEach((oneOf) => {
                        if (oneOf.type === "asset/resource") {
                            oneOf.exclude.push(wasmExtensionRegExp);
                        }
                    });
                });
                return webpackConfig;
            },
        },
    };
    

Next Steps

Once the SDK is installed and configured, you're ready to start building! We recommend going through the walkthrough next. If you're ready to dive into building your ecosystem, check out our API Reference

Start Walkthrough Explore API