webdev icon indicating copy to clipboard operation
webdev copied to clipboard

[documentation] documentation on how to compile dart to js for a non-web target with webdev build

Open iapicca opened this issue 1 year ago • 3 comments

I want to compile dart to js for a non-web target (eg. fermyon/js, node)

I'm told it's possible with 2 possible approaches:

  1. webdev build --no-release suggested here
  2. dart compile js --server-mode suggested here with a 3rd party node_preamble

it would be nice to have some documentation on how to achieve this the 1. approach.

I admit that this is a skill issue rather than a dart issue but maybe I'm not the only developer facing this and a minimal example would be great

here is a reproducible setup/example using node (repo)

node example
  • set up node dependencies
npm init -y && \
npm install express && \
npm install --save-dev typescript @types/node @types/express ts-node-dev
  • create the file tsconfig.json with the code below
{
    "compilerOptions": {
      "allowJs": true,
      "target": "ES6",
      "module": "commonjs",
      "strict": true,
      "esModuleInterop": true,
      "skipLibCheck": true,
      "outDir": "./dist",
      "rootDir": "./src"
    },
    "include": ["src"]
  }  
  • create the file `src/greeting.js with the following code
export function greeting() {
    return "Hello from JS"
}
  • create the file src/index.ts with the code below
import express, { Request, Response } from 'express';
import { greeting } from './greeting.js';

const app = express();
const port = 3000;

app.get('/', (req: Request, res: Response) => {
  res.send(greeting());
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

how can I create an equivalent

String greeting() => 'Hello from Dart';

import it and use it in index.ts?

notes

cc @maks & @sigmundch from https://github.com/dart-lang/sdk/issues/53884 @nex3 I've been told on Twitter that you have experience with this use case from sass

iapicca avatar May 11 '24 15:05 iapicca

From the Sass end, we've built the cli_pkg package to encapsulate the logic for releasing a package to various platforms, including as a Node.js library. See the npm docs and the pkg.jsModuleMainLibrary documentation for details.

nex3 avatar May 20 '24 18:05 nex3

It sounds like this is an area we could do better documenting, but I think this might belong in the SDK issue tracker if we're going to be guiding users to use dart compile js. I'll look into moving this issue there.

bkonyi avatar Jul 31 '24 17:07 bkonyi