# @carbontian/esbuild-wasm-compiler

> File Resolution for Esbuild running in the Browser

Latest version **0.0.5** (published 2024-02-10) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @carbontian/esbuild-wasm-compiler
pnpm add @carbontian/esbuild-wasm-compiler
yarn add @carbontian/esbuild-wasm-compiler
bun add @carbontian/esbuild-wasm-compiler
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2024-02-10 |
| First published | 2024-02-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 159.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Maintainers | fewismuch |
| Keywords | esbuild, wasm, resolve, file-system |

## Links

- npm: https://www.npmjs.com/package/@carbontian/esbuild-wasm-compiler
- Repository: https://github.com/fewismuch/esbuild-wasm-compiler
- Homepage: https://github.com/fewismuch/esbuild-wasm-compiler#readme
- Issues: https://github.com/fewismuch/esbuild-wasm-compiler/issues
- npm.io page: https://npm.io/package/@carbontian/esbuild-wasm-compiler

## Dependencies (1)

- [esbuild-wasm](https://npm.io/package/esbuild-wasm.md) ^0.20.0

## Alternatives

- [base64url](https://npm.io/package/base64url.md) — 6.1M weekly downloads
- [get-installed-path](https://npm.io/package/get-installed-path.md) — 502.9K weekly downloads
- [@uppy/url](https://npm.io/package/@uppy/url.md) — 185.8K weekly downloads
- [@d3fc/d3fc-shape](https://npm.io/package/@d3fc/d3fc-shape.md) — 16.2K weekly downloads
- [localizer](https://npm.io/package/localizer.md) — 226 weekly downloads

## Recent versions

- 0.0.5 (latest) — 2024-02-10
- 0.0.4 — 2024-02-10
- 0.0.3 — 2024-02-10
- 0.0.2 — 2024-02-10
- 0.0.1 — 2024-02-10

## README

# esbuild-wasm-compiler

![NPM version](https://img.shields.io/npm/v/@carbontian/esbuild-wasm-compiler.svg?style=flat)

一个运行在浏览器中`esbuild-wasm`的文件解析器

## 介绍

`esbuild-wasm-compiler`是`esbuild-wasm`的文件解析器。由于Web浏览器不能直接访问文件系统，`esbuild-wasm-compiler`在编译过程中拦截esbuild发出的文件“读”请求，允许应用程序从外部解析文件。通过这种机制，esbuild可以解析来自IndexedDB、LocalStorage、Http或任何其他浏览器可访问的可读设备的文件。

`esbuild-wasm-compiler`主要提供给编辑器使用。

参考了 [sinclairzx81/esbuild-wasm-resolve](https://github.com/sinclairzx81/esbuild-wasm-resolve) ，在此基础上添加了第三方依赖包解析和css文件解析，以及一些工具函数。

## 安装

```bash
$ npm install @carbontian/esbuild-wasm-compiler
```

## 使用

### html中使用

[example](https://)

### 项目中使用

```javascript
import {Compiler,kvFilesResolver} from '@carbontian/esbuild-wasm-compiler'
import {files} from './files'

const compiler = new Compiler({
  filesResolver: path => {
    return kvFilesResolver(files, path)
  },
},{
  packageJson: JSON.parse(files["package.json"]),
})

const code = await compiler.compile('/App.tsx')
console.log(code);


```

`./files`

```javascript
const AppCode = `
import React from 'react'
import ReactDOM from 'react-dom/client'

const App = () => {
  const [num, setNum] = React.useState<number>(1)
  return <>
    <button onClick={() => setNum(num + 1)}>click</button>
    <span>{num}</span>
  </>
}
ReactDOM.render(<App/>, document.getElementById("root"));
`;

const packageJson = `
{
    "name": "react-ts",
    "version": "0.0.1",
    "private": true,
    "dependencies": {
        "react": "^18.1.0",
        "react-dom": "^18.1.0"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test --env=jsdom",
        "eject": "react-scripts eject"
    },
    "devDependencies": {
        "react-scripts": "latest",
        "typescript": "latest"
    }
}
`

export const files = {
  "/App.tsx": AppCode,
  "package.json":packageJson
};
```

## 配置项

```typescript
export interface FilesResolver {
  filesResolver(path: string): Promise<string> | string;
}
export interface CompilerOptions extends esbuild.InitializeOptions {
  /**
   * package.json文件内容
   */
  packageJson?: Record<string, any>;
  /**
   * 是否替换第三方依赖包包名为importMap中的url，默认true
   */
  replaceImports?: boolean;
}
/**
 * files对象格式 文件解析器
 * @param files
 * @param path
 * @example const files = {
 *   "/index.ts": `
 *      import {count} from './count'
 *      const name = 'home'
 *   `,
 *   "/count":`export const count = 1`
 * }
 * @example kvFilesResolver(files,'/count')=>`export const count = 1`
 */
export declare const kvFilesResolver: (files: Record<string, string>, path: string) => string;
export declare class Compiler {
  constructor(resolver: FilesResolver, options?: CompilerOptions | undefined);
  compile(entryPoint: string, options?: esbuild.BuildOptions): Promise<string>;
  /**
   * 获取importmap script标签
   */
  getImportsScriptElement(): HTMLScriptElement;
}

// 默认esbuild-wasm url
const ESBUILD_WASM_URL = 'https://esm.sh/esbuild-wasm@0.20.0/esbuild.wasm'


```

## LICENSE

MIT

---
_Source: https://npm.io/package/@carbontian/esbuild-wasm-compiler · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._