Question: What is the entry point to parse a source string instead of files?

[georges-gomes]

Like what you did in the playground?
I would like to integrate in-browser parsing into webcomponents.dev

Thanks!

[runem]

I had to do a some manual work locally in order to get it working with the current exported library bundle. I plan on changing this, and I'm currently in the process of a big refactoring so that will become possible. Here are the current shortcomings that I'm adressing:

• I only export one cjs bundle, including nodejs imports such as "fs", which are only required by CLI. This makes it impossible to ship the core functionality without some manual removal of exports. In addition to adressing that, I'm also looking into shipping both cjs- and esm bundles.
• Parsing web components from strings is buried in the CLI at the moment, but I plan on lifting this to a library export.
• Converting the raw output to different formats is also buried in the CLI, but this I also plan on lifting this to a library export.
• This analyzer depends on the Typescript parser, so I have to load almost a 1mb of Typescript to run it in the browser. I haven't looked into it yet, but it might be possible to reduce the size.

I will keep you updated on my progress here. When it's ready, I will commit the code for my playground and I will document the API in the readme :-)

[georges-gomes]

Cool, your description was also understanding so I'm not too stupid :)

I'm good with the typescript parser as I already have it loaded.

I look forward to it 🤗
Cheers!

[runem]

@georges-gomes It's now possible to run it in the browser using the beta npm publish of version 1.0.0 :-) The final release is not expected to change much from the beta version.

"web-component-analyzer": "1.0.0-next.9"

If you are interested in playing around with the API, here's a short example of how to use it:

const format = "markdown"; // or "json"
const code = "...";

const { transformAnalyzerResult, analyzeText } = await import("web-component-analyzer");

const { results, program } = analyzeText(code);
// or
const { results, program } = analyzeText([
  { fileName: "file1.js", text: code },
  { fileName: "file2.js", text: "..." }, // these files can depend on each other
  { fileName: "file3.js", text: "...", analyze: false }
]);
// each result in "results" is the result of analyzing the corresponding text where "analyze" is not false



const output = transformAnalyzerResult(format, results, program);

If you already have a TS source file you can analyze it using:

analyzeSourceFile(sourceFile, { checker })

Please don't hesitate to reach out to me with any questions or requests 👍

[runem]

Version 1.0.0 is live now, so I'll close this issue 🎉