Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Generate ".d.ts" definition files for Stylable stylesheets #1766

Merged
merged 40 commits into from
Jun 15, 2021
Merged

Conversation

tomrav
Copy link
Collaborator

@tomrav tomrav commented Apr 22, 2021

By generating a .d.ts file for every component we aim to improve the type checking of components and how they use the inner parts of stylesheets.

These .d.ts files can validate the following:

  • classes - check that used classes exist on the imported stylesheet
  • states - and their values are checked against the class that defined them
  • variable/keyframes - are checked to exist in the stylesheet
  • stVars - checked that they exist and display value generated in build-time

Execution flow will be using CLI in watch mode, and adding the generated file to the project .gitignore. These should be published alongside any .st.css file.

Tasks:

  • Generate .d.ts for better validation and completion when consuming .st.css stylesheets in TypeScript
  • Implement source-maps for the .d.ts files to allow ctrl+click to source (.st.css)
  • Expose functionality through the CLI
  • Narrow the StylableDOMUtil to not require the cssStates function, but to instead use stylesheet namespace and generate states itself
  • Add docs - new TypeScript intgeration guide

Blocked by #1743
Resolves #351

@tomrav tomrav added feature New syntax feature or behavior tooling CLI, stylable-scripts boilerplate labels Apr 22, 2021
@tomrav tomrav self-assigned this Apr 22, 2021
@idoros

This comment has been minimized.

@idoros
Copy link
Collaborator

idoros commented May 4, 2021

closes: #351

@tomrav tomrav requested a review from barak007 May 27, 2021 12:35
@tomrav tomrav marked this pull request as ready for review May 27, 2021 14:15
packages/module-utils/test/test-kit/dts-kit.ts Outdated Show resolved Hide resolved
packages/module-utils/test/sourcemap.spec.ts Show resolved Hide resolved
packages/module-utils/test/generate-dts.spec.ts Outdated Show resolved Hide resolved
packages/module-utils/test/generate-dts.spec.ts Outdated Show resolved Hide resolved
packages/module-utils/src/generate-dts.ts Show resolved Hide resolved
packages/cli/src/build.ts Outdated Show resolved Hide resolved
packages/cli/src/build.ts Outdated Show resolved Hide resolved
packages/cli/README.md Outdated Show resolved Hide resolved
packages/cli/src/build.ts Outdated Show resolved Hide resolved
packages/cli/test/cli.spec.ts Show resolved Hide resolved
packages/module-utils/src/generate-dts.ts Show resolved Hide resolved
tomrav added 4 commits June 6, 2021 17:26
- move ts testkit to e2e-test-kit
- move dom-test-kit compliance tests
- extracted .d.ts and sourcemap generation from createModuleSource
- ts testkit can now link to project node_modules
@tomrav tomrav merged commit a9ae63f into master Jun 15, 2021
@tomrav tomrav deleted the tom/dts branch June 15, 2021 11:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature New syntax feature or behavior tooling CLI, stylable-scripts boilerplate
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Feature proposal: Live DTS generation
3 participants