This monorepo contains two packages that provide Solidity compilation capabilities for web environments:

1. web-solc: A package for running specific versions of solc in the browser using web workers.
2. @web-solc/react: React bindings around web-solc

The web-solc package allows you to run specific versions of the Solidity compiler (solc) in the browser using web workers. It supports arbitrary Solidity compilation using the Compiler Input and Output JSON format.

import { fetchSolc } from "web-solc";

const { compile, stopWorker } = await fetchSolc("^0.8.25");

const { contracts } = await compile({
  language: "Solidity",
  sources: {
    "test.sol": {
      content: "pragma solidity ^0.8.0; contract Test {}"
    }
  },
  settings: {
    outputSelection: {
      "*": {
        "*": ["*"]
      }
    }
  }
});

// Don't forget to cleanup the running Worker when done
stopWorker();

For more details, see the web-solc README.

The @web-solc/react package provides React bindings for using the Solidity compiler in browser environments. It offers a useWebSolc() hook and a <WebSolcProvider> component for easy integration with React applications.

import { WebSolcProvider, useWebSolc } from "@web-solc/react";
import type { CompilerInput, CompilerOutput } from "web-solc";

function App() {
  return (
    <WebSolcProvider>
      <CompilationComponent />
    </WebSolcProvider>
  );
}

function CompilationComponent({ compilerInput }: { compilerInput: CompilerInput }) {
  const solc = useWebSolc("^0.8.25");

  if (!solc) {
    return <>Loading solc...</>;
  }

  const compile = async () => {
    try {
      const output: CompilerOutput = await solc.compile(compilerInput);
      console.log("Compilation output:", output);
    } catch (error) {
      console.error("Compilation error:", error);
    }
  };

  return <button onClick={compile}>Compile</button>;
}

For more details, see the @web-solc/react README.

This repository includes a sample webapp that demonstrates Solidity compilation inside the browser. You can find it in the ./packages/example/ directory.

To use these packages in your project, you can install them via npm:

npm install --save web-solc @web-solc/react

Contributions are welcome! Please feel free to submit a pull request.

This project is licensed under the MIT License - see the LICENSE file for details.