Skip to content

Conversation

@codegangsta
Copy link
Collaborator

Description

Adds a Custom Elements Manifest (CEM) generator for Pine web components, following the CEM v1.0.0 specification. This replaces the previous VS Code HTML Custom Data generator with a standardized format that's supported by more tooling.

Why CEM?

  • Broader editor support out of the box - JetBrains IDEs (WebStorm, IntelliJ) natively consume CEM files without any extensions. VS Code-based editors can use the wc-toolkit extension.
  • No patching required - The previous implementation required a postinstall script to patch VS Code settings, which was fragile and invasive. CEM is a standard format that tools discover automatically via the customElements field in package.json.
  • Cleaner implementation - Single generator, single output format, no runtime patching scripts.

Key changes:

  • Created custom-elements-manifest-generator.ts - a custom Stencil output target that generates a CEM-compliant manifest
  • Rich documentation extracted from MDX files including descriptions, examples, slots, CSS parts, and events
  • Example links pointing to specific Storybook documentation sections
  • Source links to GitHub for each component
  • Added wc.config.js for local development with the wc-toolkit VS Code extension

Removed:

  • vscode-custom-data-generator.ts - replaced by CEM
  • vscode-settings-patcher.cjs - no longer needed
  • Postinstall scripts that patched VS Code settings

Type of change

  • New feature (non-breaking change which adds functionality)
  • This change requires a documentation update

How Has This Been Tested?

  • tested manually
  • other: Verified CEM schema compliance, tested autocomplete in VS Code/Cursor with wc-toolkit extension

Test Configuration:

  • Pine versions: 3.11.1
  • OS: macOS
  • Browsers: N/A (build tooling)
  • Misc: VS Code with wc-toolkit.web-components-language-server extension

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing tests pass locally with my changes
  • Design has QA'ed and approved this PR

@github-actions github-actions bot added the package: core Changes have been made to the Core package label Dec 18, 2025
@netlify
Copy link

netlify bot commented Dec 18, 2025

Deploy Preview for pine-design-system ready!

Name Link
🔨 Latest commit d6f598a
🔍 Latest deploy log https://app.netlify.com/projects/pine-design-system/deploys/694450304d6fd50008574fb8
😎 Deploy Preview https://deploy-preview-615--pine-design-system.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core Changes have been made to the Core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants