feat: plugins of wepack & rspack support css inject for web component

[YyumeiZhang]

中文模板 / Chinese Template

• I have read and followed Pull Request Guidelines of the contributing guide.

What kind of change does this PR introduce? (check at least one)

• Bugfix
• Feature
• Code style update
• Refactor
• Test Case
• TypeScript definition update
• Document improve
• CI/CD improve
• Branch sync
• Other, please describe:

PR description

Fixes #

使用方式：
在需要插入样式的位置调用 importSemiComponentStyle 函数，函数具体参数如下

function importSemiComponentStyle(
    // 需要插入的组件字符串，固定格式
    // 开头为 SEMI_INSERT_STYLE_BEGIN
    // 结束为 SEMI_INSERT_STYLE_END
    // 中间为组件数组，
    insertComponentStr: string,
    // 样式插入位置的 shadow root
    root: ShadowRoot,
    // 回调函数
    cb?: function,
)

函数使用方式如下：

class TestShadowDom extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }
  connectedCallback() {
    const root = this.shadowRoot;
       
    // ts 项目中需使用 @ts-ignore 忽略importSemiComponentStyle报错
    // Semi 插件将解析以下语句，将 importSemiComponentStyle 具体实现插入到该文件中
    importSemiComponentStyle(
          'SEMI_INSERT_STYLE_BEGIN["Button"]SEMI_INSERT_STYLE_END',
          this.shadowRoot
    );
    const container = document.createElement('div');
    this.shadowRoot?.appendChild(container);

    ReactDOM.render(<SemiComponent />, container);
  }
}

customElements.define("test-shadow-dom", TestShadowDom);

项目配置
普通 webpack

// webpack.config.js
//....
const SemiPlugin = require('@douyinfe/semi-webpack-plugin').default;

module.exports = {
    //....其他配置...
    plugin: [
        //...其他插件...
        new SemiPlugin({
            // 可指定省略 css 编译
            // omitCss: true,
            // 可设置主题
            // webComponent 支持 Boolean 以及 RegExp。
            // 用于指定使用了 importSemiComponentStyle 的路径
            // 传入 true，则认为 路径 /src/* 下使用了 importSemiComponentStyle
            webComponentPath: true
        }),
    }),
    ]
}

Changelog

🇨🇳 Chinese

• Feat: 实现 webpack & rspack 插件用于对 web components中的 semi 组件进行样式插入

---

🇺🇸 English

• Fix: Implement webpack & rspack plugins for style insertion of semi components in web components

Checklist

• Test or no need
• Document or no need
• Changelog or no need

Other

• Skip Changelog

Additional information

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 88.16%. Comparing base (1793fb1) to head (b2fbed3).

❗ Current head b2fbed3 differs from pull request most recent head d4f9ffa

Please upload reports for the commit d4f9ffa to get more accurate results.

❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files

@@             Coverage Diff             @@
##           release    #2221      +/-   ##
===========================================
- Coverage    88.18%   88.16%   -0.02%     
===========================================
  Files          440      440              
  Lines        26047    26047              
  Branches      6649     6649              
===========================================
- Hits         22969    22965       -4     
- Misses        3078     3082       +4     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit d4f9ffa:

Sandbox	Source
pr-story	Configuration

[cypress]

Passing run #2495 ↗︎

0	259	10	0	0
⚠️ You've recorded test results over your free plan limit. Upgrade your plan to view test results.

Details:

Merge d4f9ffa into 1793fb1...
Project: semi-design	Commit: b2fbed38d9 ℹ️
Status: Passed	Duration: 10:45 💡
Started: May 20, 2024 2:24 AM	Ended: May 20, 2024 2:35 AM

Review all test suite changes for PR #2221 ↗︎