runem / web-component-analyzer

CLI that analyzes web components and emits documentation
https://runem.github.io/web-component-analyzer
MIT License
507 stars 65 forks source link

API usage is missing example #204

Open jeromecambon opened 3 years ago

jeromecambon commented 3 years ago

I tried to use the API (instead of the CLI), but I have hard time to make it work. I'm trying to analyze a ts file using analyzeSourceFile() and potentially transformAnalyzerResult().

Could you please provide an full example ? I think it would be necessary to add this in the Readme.

Moreover, the following line from the README seems obsolete, checker is not a valid option. const result = analyzeSourceFile(sourceFile, { checker });

fdesforges commented 3 years ago

Hi

I use it like that in my case and I remember it was tricky to setup :

1) create a program with your files

    const program = createProgram(files, compilerOptions),

2) filter only files of interest from the program

      const sourceFiles = program.getSourceFiles().filter((sf) => files.includes(sf.fileName))

3) Analyse the source file given by the program one by one :

const result = analyzeSourceFile(sourceFile, {
        program,
        verbose: true,
        config: {analyzeGlobalFeatures: true}
      })

Never used the check argument, but I may help you to setup a working solution.

jeromecambon commented 3 years ago

Thank you for your answer. I did almost the same, but I'll give a try with your exact setting.

jeromecambon commented 3 years ago

I still got issues with the setup. I finally found the following is much simpler:

    let fileStr = fs.readFileSync(filePath, "utf8").toString();
    let result: AnalyzeTextResult = analyzeText(fileStr);
    let output = transformAnalyzerResult("json", result.results, result.program, {visibility: "private"});
markhuot commented 3 years ago

fwiw, the full snippet I needed to get this running was,

// Get an absolute list of files somehow. I used the `glob` package to do this
const files = glob.sync('./src/components/**/*.ts').map(f => path.resolve(f));

// Pass in any TS compiler options, maybe loaded from `tsconfig.json`
const compilerOptions = {};

// Create a TS program based on those files and the compiler options
const program = createProgram(files, compilerOptions);

// Limit the program to only the files you're concerned with. This ensures that even
// though `components/Foo.ts` includes `hooks/useBar.ts` the `useBar.ts` won't get
// a top level "custom properties" key
const sourceFiles = program.getSourceFiles().filter(sf => files.includes(sf.fileName));

// Map over the source files and analyze them for web components
const results = sourceFiles.map(sourceFile => analyzeSourceFile(sourceFile, {
    program,
    verbose: true,
    config: {
        format: 'custom-elements.json',
        analyzeGlobalFeatures: true,
    }
}));

// Take the results of the analysis and transform them in to readable output
const transformed = transformAnalyzerResult('json', results, program);
mabry1985 commented 2 years ago

Thank you, the documentation here was driving me nuts

manandkumaar commented 1 year ago

@markhuot with the latest version of WCA, i am getting empty result. But the same was working with WCA v1.1.6.

typescript - 4.9.4 web-component-analyzer - 2.0.0-next.4 lit - 2.6.1

const componentPath = path.resolve(__dirname, '../components');
  const files = glob.sync(`${componentPath}/**/*.ts`).map((f) => path.resolve(f));
  files.forEach((file) => {
    this.addDependency(file);
  });

  // Inspired by https://github.com/runem/web-component-analyzer/issues/204
  const compilerOptions = {};
  const program = createProgram(files, compilerOptions);
  const sourceFiles = program.getSourceFiles().filter((sf) => files.includes(sf.fileName));
  const results = sourceFiles.map((sourceFile) =>
    analyzeSourceFile(sourceFile, {
      program,
      verbose: true,
      config: {
        format: 'custom-elements.json',
        analyzeGlobalFeatures: true
      }
    })
  );
  const transformed = transformAnalyzerResult('json', results, program);

current output :

{ "version": "experimental", "tags": [] }

Not sure anything i need to update in the above code to get the tags result properly. Please suggest. Thanks

@runem :CC