Merge pull request #507 from zenn-dev/canary

release v0.1.155

.github/workflows/lint.yml

@@ -14,9 +14,9 @@ jobs:
     steps:
       - uses: actions/checkout@v3
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         with:
-          version: 8
+          version: 9
 
       - name: パッケージをインストール
         run: pnpm install

.github/workflows/publish-canary.yml

@@ -18,9 +18,9 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v3
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         with:
-          version: 8
+          version: 9
 
       - name: Setup node
         uses: actions/setup-node@v3

.github/workflows/publish-latest.yml

@@ -18,9 +18,9 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v3
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         with:
-          version: 8
+          version: 9
 
       - name: Setup node
         uses: actions/setup-node@v2

.github/workflows/test.yml

@@ -14,9 +14,9 @@ jobs:
     steps:
       - uses: actions/checkout@v3
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         with:
-          version: 8
+          version: 9
 
       - name: パッケージをインストール
         run: pnpm install

.prettierignore

@@ -0,0 +1 @@
+pnpm-lock.yaml

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"]
+}

.vscode/settings.json

@@ -1,6 +1,30 @@
 {
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[yaml]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[scss]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }

lerna.json

@@ -2,6 +2,6 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.1.154",
+  "version": "0.1.155-alpha.3",
   "npmClient": "pnpm"
 }

package.json

@@ -3,6 +3,7 @@
   "devDependencies": {
     "@lerna-lite/cli": "^1.15.1",
     "npm-run-all": "^4.1.5",
+    "prettier": "^3.3.3",
     "turbo": "^1.7.4"
   },
   "scripts": {
@@ -12,6 +13,7 @@
     "lint:lockfile": "npx lockfile-lint --path pnpm-lock.yaml --allowed-hosts npm yarn --validate-https",
     "strict:lint": "turbo strict:lint",
     "fix": "turbo fix",
+    "fix:prettier": "turbo fix:prettier",
     "publish:all": "pnpm test && pnpm build && lerna publish",
     "publish:canary": "pnpm build && lerna publish --pre-dist-tag canary",
     "test": "turbo test"
@@ -32,6 +34,6 @@
   "engines": {
     "npm": "use pnpm please!",
     "yarn": "use pnpm please!",
-    "pnpm": ">=8"
+    "pnpm": ">=9 <10"
   }
 }

packages/zenn-cli/.prettierignore

@@ -1 +1,2 @@
 /dist
+*.md

packages/zenn-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zenn-cli",
-  "version": "0.1.154",
+  "version": "0.1.155-alpha.3",
   "description": "Preview Zenn content locally.",
   "repository": {
     "type": "git",
@@ -78,7 +78,6 @@
     "npm-run-all": "^4.1.5",
     "open": "^8.4.1",
     "path": "^0.12.7",
-    "prettier": "^2.8.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.7.1",

packages/zenn-cli/src/client/components/Loading.tsx

@@ -29,5 +29,7 @@ const StyledLoading = styled.div`
   border: 4px solid var(--c-primary);
   border-radius: 50%;
   border-top-color: var(--c-primary-bg);
-  animation: ${rotate} 0.8s linear infinite, ${fadein} 0.7s;
+  animation:
+    ${rotate} 0.8s linear infinite,
+    ${fadein} 0.7s;
 `;

packages/zenn-cli/src/client/components/books/show/BookHeader.tsx

@@ -81,7 +81,8 @@ const StyledBookHeader = styled.header`
   .book-header__cover-img {
     background: #fff;
     object-fit: cover;
-    box-shadow: 0 9px 20px -9px rgba(0, 27, 68, 0.52),
+    box-shadow:
+      0 9px 20px -9px rgba(0, 27, 68, 0.52),
       0 0 3px rgba(0, 21, 60, 0.1);
     border-radius: 5px;
   }

packages/zenn-cli/src/client/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="ja">
   <head>
     <meta charset="utf-8" />

packages/zenn-cli/src/server/__tests__/preview/app.test.ts

@@ -62,7 +62,7 @@ describe('/api/articles/:slug', () => {
         type: 'tech',
         topics: [],
         published: true,
-        bodyHtml: expect.stringContaining('<p>Hello!</p>'),
+        bodyHtml: expect.stringMatching(/<p.*>Hello!<\/p>/),
       })
     );
   });
@@ -216,7 +216,7 @@ describe('/api/books/:book_slug/chapters/:chapter_filename', () => {
         title: 'title2',
         free: true,
         position: 0,
-        bodyHtml: expect.stringContaining('<p>Hello!</p>'),
+        bodyHtml: expect.stringMatching(/<p.*>Hello!<\/p>/),
       })
     );
   });

packages/zenn-cli/src/server/commands/init.ts

@@ -1,6 +1,10 @@
 import { CliExecFn } from '../types';
 import * as Log from '../lib/log';
-import { detectPackageExecutor, getWorkingPath, generateFileIfNotExist } from '../lib/helper';
+import {
+  detectPackageExecutor,
+  getWorkingPath,
+  generateFileIfNotExist,
+} from '../lib/helper';
 import { initHelpText, invalidOptionText } from '../lib/messages';
 import arg from 'arg';
 

packages/zenn-content-css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zenn-content-css",
-  "version": "0.1.154",
+  "version": "0.1.155-alpha.3",
   "license": "MIT",
   "description": "Zenn flavor content style.",
   "repository": {
@@ -15,7 +15,9 @@
   "scripts": {
     "dev": "sass ./src/index.scss ./lib/index.css --watch --no-source-map",
     "build": "sass ./src/index.scss ./lib/index.css --style compressed --no-source-map",
-    "test": "echo 'no test yet'"
+    "test": "echo 'no test yet'",
+    "lint:prettier": "prettier ./src",
+    "fix:prettier": "prettier -w ./src"
   },
   "devDependencies": {
     "sass": "^1.58.1"

packages/zenn-embed-elements/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zenn-embed-elements",
-  "version": "0.1.154",
+  "version": "0.1.155-alpha.3",
   "license": "MIT",
   "description": "Web components for embedded contents.",
   "repository": {
@@ -17,7 +17,9 @@
     "build": "pnpm clean && run-p build:*",
     "build:tsc": "tsc -p .",
     "lint": "eslint . --ext .ts,.tsx",
+    "lint:prettier": "prettier .",
     "fix": "eslint . --ext .ts,.tsx --fix",
+    "fix:prettier": "prettier -w .",
     "strict:lint": "eslint . --ext .ts,.tsx --max-warnings 0",
     "test": "echo 'no test yet'"
   },

packages/zenn-markdown-html/__tests__/basic.test.ts

@@ -1,14 +1,23 @@
 import { describe, test, expect } from 'vitest';
 import markdownToHtml from '../src/index';
+import { parse } from 'node-html-parser';
 
 describe('MarkdownからHTMLへの変換テスト', () => {
   test('markdownからhtmlへ変換する', () => {
     const html = markdownToHtml('Hello\n## hey\n\n- first\n- second\n');
-    expect(html).toContain(`<p>Hello</p>`);
-    expect(html).toContain(
-      `<h2 id="hey"><a class="header-anchor-link" href="#hey" aria-hidden="true"></a> hey</h2>`
+    const p = parse(html).querySelector('p');
+    const h2 = parse(html).querySelector('h2');
+    const ul = parse(html).querySelector('ul');
+    const liElms = parse(html).querySelectorAll('li');
+
+    expect(p?.innerHTML).toBe('Hello');
+    expect(h2?.innerHTML).toBe(
+      '<a class="header-anchor-link" href="#hey" aria-hidden="true"></a> hey'
     );
-    expect(html).toContain(`<ul>\n<li>first</li>\n<li>second</li>\n</ul>\n`);
+    expect(ul).not.toBeNull();
+    expect(liElms?.length).toBe(2);
+    expect(liElms[0].innerHTML).toBe('first');
+    expect(liElms[1].innerHTML).toBe('second');
   });
 
   test('インラインコメントはhtmlに変換しない', () => {

packages/zenn-markdown-html/__tests__/br.test.ts

@@ -6,7 +6,7 @@ describe('<br /> のテスト', () => {
     const patterns = ['foo<br>bar', 'foo<br/>bar', 'foo<br />bar'];
     patterns.forEach((pattern) => {
       const html = markdownToHtml(pattern);
-      expect(html).toMatch(/<p>foo<br \/>bar<\/p>/);
+      expect(html).toContain('foo<br />bar');
     });
   });
   test('テーブル内の<br />は保持する', () => {
@@ -20,7 +20,7 @@ describe('<br /> のテスト', () => {
   });
   test('インラインコード内の<br />はエスケープする', () => {
     const html = markdownToHtml('foo`<br>`bar');
-    expect(html).toMatch(/<p>foo<code>&lt;br&gt;<\/code>bar<\/p>/);
+    expect(html).toContain('foo<code>&lt;br&gt;</code>bar');
   });
   test('コードブロック内の<br />はエスケープする', () => {
     const html = markdownToHtml('```\n<br>\n```');

packages/zenn-markdown-html/__tests__/dollar.test.ts

@@ -4,22 +4,22 @@ import markdownToHtml from '../src/index';
 describe('$ マークのテスト', () => {
   test('リンクと同じ行にある $ は katex に変換される', () => {
     const html = markdownToHtml('$a,b,c$foo[foo](https://foo.bar)bar');
-    expect(html).toEqual(
-      '<p><embed-katex><eq class="zenn-katex">a,b,c</eq></embed-katex>foo<a href="https://foo.bar" target="_blank" rel="nofollow noopener noreferrer">foo</a>bar</p>\n'
+    expect(html).toContain(
+      '<embed-katex><eq class="zenn-katex">a,b,c</eq></embed-katex>foo<a href="https://foo.bar" target="_blank" rel="nofollow noopener noreferrer">foo</a>bar'
     );
   });
 
   test('リンクの後に無効な $ が続く場合はそのままにする', () => {
     const html = markdownToHtml('$a,b,c$foo[foo](http://foo.bar)$bar');
-    expect(html).toEqual(
-      '<p><embed-katex><eq class="zenn-katex">a,b,c</eq></embed-katex>foo<a href="http://foo.bar" target="_blank" rel="nofollow noopener noreferrer">foo</a>$bar</p>\n'
+    expect(html).toContain(
+      '<embed-katex><eq class="zenn-katex">a,b,c</eq></embed-katex>foo<a href="http://foo.bar" target="_blank" rel="nofollow noopener noreferrer">foo</a>$bar'
     );
   });
 
   test('リンク名に $ が含まれる場合はそのままにする', () => {
     const html = markdownToHtml('$a,b,c$foo[$bar](http://foo.bar)bar');
-    expect(html).toEqual(
-      '<p><embed-katex><eq class="zenn-katex">a,b,c</eq></embed-katex>foo<a href="http://foo.bar" target="_blank" rel="nofollow noopener noreferrer">$bar</a>bar</p>\n'
+    expect(html).toContain(
+      '<embed-katex><eq class="zenn-katex">a,b,c</eq></embed-katex>foo<a href="http://foo.bar" target="_blank" rel="nofollow noopener noreferrer">$bar</a>bar'
     );
   });
   test('リンクのhrefに $ が含まれる場合はそのままにする', () => {
@@ -35,45 +35,45 @@ describe('$ マークのテスト', () => {
 describe('HTMLタグにエスケープするテスト', () => {
   test('katex内の<sscript />をエスケープする', () => {
     const html = markdownToHtml('$a,<script>alert("XSS")</script>,c$');
-    expect(html).toEqual(
-      `<p><embed-katex><eq class="zenn-katex">a,&lt;script&gt;alert("XSS")&lt;/script&gt;,c</eq></embed-katex></p>\n`
+    expect(html).toContain(
+      `<embed-katex><eq class="zenn-katex">a,&lt;script&gt;alert("XSS")&lt;/script&gt;,c</eq></embed-katex>`
     );
   });
 });
 
 describe('$ のペアのテスト', () => {
   test('リンクの前後にある一文字だけを含む$のペアをkatexに変換する', () => {
     const html = markdownToHtml('$a$foo[foo](https://foo.bar)bar,refs:$(2)$');
-    expect(html).toEqual(
-      '<p><embed-katex><eq class="zenn-katex">a</eq></embed-katex>foo<a href="https://foo.bar" target="_blank" rel="nofollow noopener noreferrer">foo</a>bar,refs:<embed-katex><eq class="zenn-katex">(2)</eq></embed-katex></p>\n'
+    expect(html).toContain(
+      '<embed-katex><eq class="zenn-katex">a</eq></embed-katex>foo<a href="https://foo.bar" target="_blank" rel="nofollow noopener noreferrer">foo</a>bar,refs:<embed-katex><eq class="zenn-katex">(2)</eq></embed-katex>'
     );
   });
   test('リンク前後にある$のペアをkatexに変換する', () => {
     const html = markdownToHtml(
       '$a,b,c$foo[foo](https://foo.bar)bar,refs:$(2)$'
     );
-    expect(html).toEqual(
-      '<p><embed-katex><eq class="zenn-katex">a,b,c</eq></embed-katex>foo<a href="https://foo.bar" target="_blank" rel="nofollow noopener noreferrer">foo</a>bar,refs:<embed-katex><eq class="zenn-katex">(2)</eq></embed-katex></p>\n'
+    expect(html).toContain(
+      '<embed-katex><eq class="zenn-katex">a,b,c</eq></embed-katex>foo<a href="https://foo.bar" target="_blank" rel="nofollow noopener noreferrer">foo</a>bar,refs:<embed-katex><eq class="zenn-katex">(2)</eq></embed-katex>'
     );
   });
   test('リンク前後にある三つの$のペアをkatexに変換する', () => {
     const html = markdownToHtml(
       '$a,b,c$foo[foo](https://foo.bar)bar,refs:$(2)$,and:$(3)$'
     );
-    expect(html).toEqual(
-      '<p><embed-katex><eq class="zenn-katex">a,b,c</eq></embed-katex>foo<a href="https://foo.bar" target="_blank" rel="nofollow noopener noreferrer">foo</a>bar,refs:<embed-katex><eq class="zenn-katex">(2)</eq></embed-katex>,and:<embed-katex><eq class="zenn-katex">(3)</eq></embed-katex></p>\n'
+    expect(html).toContain(
+      '<embed-katex><eq class="zenn-katex">a,b,c</eq></embed-katex>foo<a href="https://foo.bar" target="_blank" rel="nofollow noopener noreferrer">foo</a>bar,refs:<embed-katex><eq class="zenn-katex">(2)</eq></embed-katex>,and:<embed-katex><eq class="zenn-katex">(3)</eq></embed-katex>'
     );
   });
   test('リンク周りにある$のペアをkatexに変換する', () => {
     const html = markdownToHtml('$a,b,c$foo[foo](https://foo.bar)bar,refs:$2$');
-    expect(html).toEqual(
-      '<p><embed-katex><eq class="zenn-katex">a,b,c</eq></embed-katex>foo<a href="https://foo.bar" target="_blank" rel="nofollow noopener noreferrer">foo</a>bar,refs:<embed-katex><eq class="zenn-katex">2</eq></embed-katex></p>\n'
+    expect(html).toContain(
+      '<embed-katex><eq class="zenn-katex">a,b,c</eq></embed-katex>foo<a href="https://foo.bar" target="_blank" rel="nofollow noopener noreferrer">foo</a>bar,refs:<embed-katex><eq class="zenn-katex">2</eq></embed-katex>'
     );
   });
   test('二つの$のペアをkatexに変換する', () => {
     const html = markdownToHtml('$a,b,c$foobar,refs:$(2)$');
-    expect(html).toEqual(
-      '<p><embed-katex><eq class="zenn-katex">a,b,c</eq></embed-katex>foobar,refs:<embed-katex><eq class="zenn-katex">(2)</eq></embed-katex></p>\n'
+    expect(html).toContain(
+      '<embed-katex><eq class="zenn-katex">a,b,c</eq></embed-katex>foobar,refs:<embed-katex><eq class="zenn-katex">(2)</eq></embed-katex>'
     );
   });
 });

packages/zenn-markdown-html/__tests__/highlight.test.ts

@@ -2,6 +2,7 @@ import loadLanguages from 'prismjs/components/index';
 
 import { describe, test, expect } from 'vitest';
 import markdownToHtml from '../src/index';
+import parse from 'node-html-parser';
 
 // markdownToHtml で diff を使っているので、あらかじめ読み込んでおく
 loadLanguages('diff');
@@ -11,7 +12,10 @@ describe('コードハイライトのテスト', () => {
     const html = markdownToHtml(
       `\`\`\`js:foo.js\nconsole.log("hello")\n\`\`\``
     );
-    expect(html).toContain('<code class="language-js">');
+    // <code />が取得できないので<pre />で取得する
+    const pre: any = parse(html).querySelector('pre');
+    const code = parse(pre?.innerHTML).querySelector('code.language-js');
+    expect(code).toBeTruthy();
     expect(html).toContain('<span class="code-block-filename">foo.js</span>');
   });