feat: add support for label option

.yarn/versions/dc57b299.yml

@@ -0,0 +1,2 @@
+releases:
+  docusaurus-remark-plugin-tab-blocks: minor

README.md

@@ -33,20 +33,26 @@ npm install docusaurus-remark-plugin-tab-blocks
 
 Add the plugin to the `remarkPlugins` list of your Docusaurus config:
 
-```diff
+```js
 module.exports = {
   presets: [
     [
       "@docusaurus/preset-classic",
       {
         blog: {
-+         remarkPlugins: [require("docusaurus-remark-plugin-tab-blocks")],
+          remarkPlugins: [require("docusaurus-remark-plugin-tab-blocks")],
         },
         docs: {
-+         remarkPlugins: [require("docusaurus-remark-plugin-tab-blocks")],
+          remarkPlugins: [
+            require("docusaurus-remark-plugin-tab-blocks"),
+            {
+              // optional plugin configuration
+              labels: [["py", "Python"]],
+            },
+          ],
         },
         pages: {
-+         remarkPlugins: [require("docusaurus-remark-plugin-tab-blocks")],
+          remarkPlugins: [require("docusaurus-remark-plugin-tab-blocks")],
         },
       },
     ],
@@ -56,6 +62,16 @@ module.exports = {
 
 ## API Reference
 
+### Plugin configuration
+
+Configuration options can be passed to the plugin using the tuple form. See usage example above.
+
+#### `labels`
+
+- Default: `[["js", "JavaScript"], ["ts", "TypeScript"]]`
+
+List with tuples with code block language attribute and tab label text.
+
 ### `tab` options
 
 Each tab can be customized separately by assign a configuration object to the `tab` key. Keep in mind that the object must be parsable JSON.
@@ -96,8 +112,7 @@ The example above will be rendered like this:
 
 This is a young library. More features are on the way:
 
-- [ ] support for more languages (currently it work only with `js` and `ts` code blocks)
-- [ ] custom `label`
+- [ ] custom `label` for each tab
 - [ ] custom `groupId`
 
 If you have an idea or see a missing feature, just open an issue or send a PR.

__tests__/__fixtures__/label.md

@@ -0,0 +1,19 @@
+```js tab
+console.log("custom javascript instead of default JavaScript label");
+```
+
+```typescript tab
+console.log("fallback typescript label");
+```
+
+```ts tab
+console.log("default TypeScript label");
+```
+
+```python tab
+print("fallback python label");
+```
+
+```py tab
+print("custom Python label");
+```

__tests__/__snapshots__/tab-blocks-plugin.test.js.snap

@@ -354,6 +354,57 @@ Accepts a function that will be used as an implementation of the mock for one ca
 "
 `;
 
+exports[`tab blocks plugin supports custom labels 1`] = `
+"import Tabs from '@theme/Tabs';
+
+import TabItem from '@theme/TabItem';
+
+<Tabs groupId=\\"code-examples\\">
+
+<TabItem value=\\"js\\" label=\\"javascript\\">
+
+\`\`\`js tab
+console.log(\\"custom javascript instead of default JavaScript label\\");
+\`\`\`
+
+</TabItem>
+
+<TabItem value=\\"typescript\\" label=\\"typescript\\">
+
+\`\`\`typescript tab
+console.log(\\"fallback typescript label\\");
+\`\`\`
+
+</TabItem>
+
+<TabItem value=\\"ts\\" label=\\"TypeScript\\">
+
+\`\`\`ts tab
+console.log(\\"default TypeScript label\\");
+\`\`\`
+
+</TabItem>
+
+<TabItem value=\\"python\\" label=\\"python\\">
+
+\`\`\`python tab
+print(\\"fallback python label\\");
+\`\`\`
+
+</TabItem>
+
+<TabItem value=\\"py\\" label=\\"Python\\">
+
+\`\`\`py tab
+print(\\"custom Python label\\");
+\`\`\`
+
+</TabItem>
+
+</Tabs>
+"
+`;
+
 exports[`tab blocks plugin supports span meta 1`] = `
 "import Tabs from '@theme/Tabs';
 

__tests__/tab-blocks-plugin.test.js

@@ -2,15 +2,20 @@ import fs from "node:fs";
 import path from "node:path";
 import remark from "remark";
 import remarkMdx from "remark-mdx";
-import tabBlocksPlugin from "../";
 
-async function processFixture(fixture) {
+afterEach(() => {
+  jest.resetModules();
+});
+
+async function processFixture(fixture, options) {
+  const tabBlocksPlugin = (await import("../")).default;
+
   const filePath = path.join(__dirname, "__fixtures__", `${fixture}.md`);
   const file = fs.readFileSync(filePath);
 
   const result = await remark()
     .use(remarkMdx)
-    .use(tabBlocksPlugin)
+    .use(tabBlocksPlugin, options)
     .process(file);
 
   return result.toString();
@@ -41,6 +46,17 @@ describe("tab blocks plugin", () => {
     expect(result).toMatchSnapshot();
   });
 
+  test("supports custom labels", async () => {
+    const result = await processFixture("label", {
+      labels: [
+        ["js", "javascript"],
+        ["py", "Python"],
+      ],
+    });
+
+    expect(result).toMatchSnapshot();
+  });
+
   test("supports span meta", async () => {
     const result = await processFixture("span");
 

index.js

@@ -8,10 +8,10 @@
 const visit = require("unist-util-visit");
 const is = require("unist-util-is");
 
-const labels = new Map([
+let tabLabel = [
   ["js", "JavaScript"],
   ["ts", "TypeScript"],
-]);
+];
 
 const importNodes = [
   {
@@ -34,12 +34,12 @@ function parseTabMeta(nodeMeta) {
 }
 
 function formatTabItem(nodes) {
+  const lang = nodes[0].lang;
+
   return [
     {
       type: "jsx",
-      value: `<TabItem value="${nodes[0].lang}" label="${labels.get(
-        nodes[0].lang
-      )}">`,
+      value: `<TabItem value="${lang}" label="${tabLabel.get(lang) || lang}">`,
     },
     ...nodes,
     {
@@ -95,8 +95,10 @@ function collectTabNodes(parent, index) {
   return tabNodes;
 }
 
-module.exports = function tabsPlugin() {
-  return (tree) => {
+module.exports = function plugin({ labels = [] } = {}) {
+  tabLabel = new Map([...tabLabel, ...labels]);
+
+  return function transformer(tree) {
     let hasTabs = false;
     let includesImportTabs = false;