ESMに更新

README.md

@@ -10,13 +10,14 @@ npm i codegrid-markdown
 
 ### Node
 ```javascript
-const CodeGridMarkdown = require('codegrid-markdown');
+import fs from 'node:fs';
+import CodeGridMarkdown from 'codegrid-markdown';
 
 const CGMDRenderer = new CodeGridMarkdown({
   // options for marked
 });
 
-const str = fs.readFileSync(__dirname + '/cg.md', 'utf-8');
+const str = fs.readFileSync(import.meta.dirname + '/cg.md', 'utf-8');
 const htmlStr = CGMDRenderer.render(str);
 ```
 
@@ -31,8 +32,6 @@ cgmd ./path/to/your.md -o ./path/to/your.html
 cgmd '# foo'
 ```
 
-Browserifyから利用する場合、ブラウザ環境でも利用可能です。
-
 ## 記法
 
 - cgmdとしての拡張記法

bin/cgmd.js

@@ -1,9 +1,9 @@
 #!/usr/bin/env node
-'use strict';
-const CodeGridMarkdown = require('../lib');
+import CodeGridMarkdown from '../lib/index.js';
+import fs from 'node:fs';
+import { parseArgs } from 'node:util';
+
 const CGMDRenderer = new CodeGridMarkdown();
-const fs = require('node:fs');
-const { parseArgs } = require('node:util');
 
 const usage = `Usage: cgmd <path/to/your/text.md> [options]
 

example/main.js

@@ -1,11 +1,10 @@
-'use strict';
-const fs               = require('fs');
-const CodeGridMarkdown = require('../lib/index');
+import fs from 'node:fs';
+import CodeGridMarkdown from '../lib/index.js';
 
 const CGMDRenderer = new CodeGridMarkdown({
   // options for marked
 });
-const str = fs.readFileSync(__dirname + '/cg.md', 'utf-8');
+const str = fs.readFileSync(import.meta.dirname + '/cg.md', 'utf-8');
 
 const htmlStr = CGMDRenderer.render(str);
 console.log(htmlStr);

lib/index.js

@@ -1,7 +1,6 @@
-'use strict';
-const tokenizer = require('./tokenizer');
-const Renderer  = require('./renderer');
-const transformer = require('./transformer');
+import tokenizer from './tokenizer.js';
+import Renderer from './renderer.js';
+import transformer from './transformer.js';
 
 /**
  * このパッケージの親玉
@@ -36,4 +35,4 @@ class CodeGridMarkdown {
   }
 }
 
-module.exports = CodeGridMarkdown;
+export default CodeGridMarkdown;

lib/renderer.js

@@ -1,6 +1,5 @@
-'use strict';
-const MDRenderer   = require('./renderer/md');
-const CGMDRenderer = require('./renderer/cgmd');
+import MDRenderer from './renderer/md.js';
+import CGMDRenderer from './renderer/cgmd.js';
 
 /**
  * トークンのレンダラ
@@ -37,4 +36,4 @@ class Renderer {
   }
 }
 
-module.exports = Renderer;
+export default Renderer;

lib/renderer/cgmd.js

@@ -1,13 +1,18 @@
-'use strict';
+import tree from './cgmd/tree.js';
+import note from './cgmd/note.js';
+import column from './cgmd/column.js';
+import imgbox from './cgmd/imgbox.js';
+import demo from './cgmd/demo.js';
+import jade from './cgmd/jade.js';
 
 // mdレベルでの独自記法が増えたらココを増やす
 const renderFunc = {
-  tree: require('./cgmd/tree'),
-  note: require('./cgmd/note'),
-  column: require('./cgmd/column'),
-  imgbox: require('./cgmd/imgbox'),
-  demo: require('./cgmd/demo'),
-  jade: require('./cgmd/jade')
+  tree,
+  note,
+  column,
+  imgbox,
+  demo,
+  jade
 };
 
 /**
@@ -41,4 +46,4 @@ class CGMDRenderer {
   }
 }
 
-module.exports = CGMDRenderer;
+export default CGMDRenderer;

lib/renderer/cgmd/column.js

@@ -1,5 +1,3 @@
-'use strict';
-
 /**
  * cg:column をレンダリングする
  *
@@ -9,10 +7,10 @@
  *   Markdownのレンダラ
  *
  */
-module.exports = function(str, renderer) {
+export default function(str, renderer) {
   return `
 <div class="Column">
 ${renderer.render(str)}
 </div>
 `.trimStart();
-};
+}

lib/renderer/cgmd/demo.js

@@ -1,5 +1,3 @@
-'use strict';
-
 /**
  * cg:demo をレンダリングする
  *
@@ -9,10 +7,10 @@
  *   Markdownのレンダラ
  *
  */
-module.exports = function(str, renderer) {
+export default function(str, renderer) {
   return `
 <div class="Demo">
 ${renderer.render(str)}
 </div>
 `.trimStart();
-};
+}

lib/renderer/cgmd/imgbox.js

@@ -1,5 +1,3 @@
-'use strict';
-
 /**
  * cg:imgbox をレンダリングする
  *
@@ -9,10 +7,10 @@
  *   Markdownのレンダラ
  *
  */
-module.exports = function(str, renderer) {
+export default function(str, renderer) {
   return `
 <figure class="ImgBox">
 ${renderer.render(str)}
 </figure>
 `.trimStart();
-};
+}

lib/renderer/cgmd/jade.js

@@ -1,5 +1,4 @@
-"use strict";
-const pug = require("pug");
+import pug from 'pug';
 
 /**
  * cg:jade をレンダリングする
@@ -11,6 +10,6 @@ const pug = require("pug");
  *   jadeなので使ってない
  *
  */
-module.exports = function (str) {
+export default function (str) {
   return pug.render(str);
-};
+}

lib/renderer/cgmd/note.js

@@ -1,5 +1,3 @@
-'use strict';
-
 /**
  * cg:note をレンダリングする
  *
@@ -9,10 +7,10 @@
  *   Markdownのレンダラ
  *
  */
-module.exports = function(str, renderer) {
+export default function(str, renderer) {
   return `
 <div class="Note">
 ${renderer.render(str)}
 </div>
 `.trimStart();
-};
+}

lib/renderer/cgmd/tree.js

@@ -1,5 +1,3 @@
-"use strict";
-
 /**
  * cg:tree をレンダリングする
  *
@@ -9,10 +7,10 @@
  *   Markdownのレンダラ
  *
  */
-module.exports = function (str, renderer) {
+export default function (str, renderer) {
   return `
 <div class="Tree">
 ${renderer.render(str)}
 </div>
 `.trimStart();
-};
+}

lib/renderer/md.js

@@ -1,9 +1,10 @@
-'use strict';
-const { marked } = require('marked');
+import { marked } from 'marked';
 
 // なんか増えたらココに追記
+import code from './md/code.js';
+
 const renderFunc = {
-  code: require('./md/code')
+  code,
 };
 
 /**
@@ -53,4 +54,4 @@ class MDRenderer {
   }
 }
 
-module.exports = MDRenderer;
+export default MDRenderer;

lib/renderer/md/code.js

@@ -1,5 +1,4 @@
-'use strict';
-const { marked } = require('marked');
+import { marked } from 'marked';
 
 const origCodeRender = marked.Renderer.prototype.code;
 
@@ -31,7 +30,7 @@ const renderLivecodeSection = (title, codeHtml) => `
  *   HTML文字列
  *
  */
-module.exports = function(code, lang, escaped) {
+export default function(code, lang, escaped) {
   // そもそも言語指定ないやつ
   if (!lang) {
     return origCodeRender.apply(this, [code, lang, escaped]);
@@ -48,4 +47,4 @@ module.exports = function(code, lang, escaped) {
     langArr[1], // タイトル
     origCodeRender.apply(this, [code, langArr[0], escaped]) // コード本体
   );
-};
+}

lib/tokenizer.js

@@ -1,6 +1,5 @@
-'use strict';
-const MD_Token = require('./tokenizer/token/md');
-const CGMD_Token = require('./tokenizer/token/cgmd');
+import MD_Token from './tokenizer/token/md.js';
+import CGMD_Token from './tokenizer/token/cgmd.js';
 
 // mdレベルでの独自記法が増えたらココを増やす
 const CGMD_START_RE = /^\[(note|column|imgbox|demo|tree)\]$/;   // [hoge]
@@ -85,4 +84,4 @@ function tokenize(str) {
   return tokens;
 }
 
-module.exports = Tokenizer;
+export default Tokenizer;

lib/tokenizer/token/base.js

@@ -1,5 +1,4 @@
-'use strict';
-const TOKEN_TYPES = require('../token_types');
+import TOKEN_TYPES from '../token_types.js';
 
 class Base_Token {
   constructor(type) {
@@ -35,4 +34,4 @@ class Base_Token {
   }
 }
 
-module.exports = Base_Token;
+export default Base_Token;

lib/tokenizer/token/cgmd.js

@@ -1,6 +1,5 @@
-'use strict';
-const Base_Token = require('./base');
-const TOKEN_TYPES = require('../token_types');
+import Base_Token from './base.js';
+import TOKEN_TYPES from '../token_types.js';
 
 const SYNTAX_RE = /^\[(\w+)\]$/;
 
@@ -34,4 +33,4 @@ class CGMD_Token extends Base_Token {
   }
 }
 
-module.exports = CGMD_Token;
+export default CGMD_Token;

lib/tokenizer/token/md.js

@@ -1,6 +1,5 @@
-'use strict';
-const Base_Token = require('./base');
-const TOKEN_TYPES = require('../token_types');
+import Base_Token from './base.js';
+import TOKEN_TYPES from '../token_types.js';
 
 /**
  * 文法別トークン: ふつうのMarkdown
@@ -21,4 +20,4 @@ class MD_Token extends Base_Token {
   }
 }
 
-module.exports = MD_Token;
+export default MD_Token;

lib/tokenizer/token_types.js

@@ -1,4 +1,6 @@
-module.exports = {
-  MD:   'md',
+const TOKEN_TYPES = {
+  MD: 'md',
   CGMD: 'cgmd'
 };
+
+export default TOKEN_TYPES;

lib/transformer.js

@@ -1,9 +1,10 @@
-'use strict';
-const cheerio = require('cheerio');
+import * as cheerio from 'cheerio';
+import demo from './transformer/demo.js';
+import tree from './transformer/tree.js';
 
 const transformFunc = {
-  demo: require("./transformer/demo"),
-  tree: require("./transformer/tree"),
+  demo,
+  tree,
 };
 
 /**
@@ -33,4 +34,4 @@ function transform(htmlStr) {
   return $.html();
 }
 
-module.exports = Transformer;
+export default Transformer;

lib/transformer/demo.js

@@ -1,5 +1,3 @@
-'use strict';
-
 const buildDemoSection = (deferredAttr, title, innerUl, content) => {
   const attrSuffix = deferredAttr ? ` ${deferredAttr}` : '';
   return `<section class="CG2-livecode"${attrSuffix}><header class="CG2-livecode__header"><div class="CG2-livecode__label">${title}</div><div class="CG2-livecode__nav"><ul>${innerUl}</ul></div></header><div class="CG2-livecode__body">${content}</div></section>`;
@@ -14,7 +12,7 @@ const buildNewTabItem = (iframeSrc) => `<li><a href="${iframeSrc}">新規タブ
  * @param {HTMLDocument} $
  *   cheerio
  */
-module.exports = function($) {
+export default function($) {
   $('.Demo').each((idx, el) => {
     const $el     = $(el);
     const $h1     = $el.find('h1').first();
@@ -32,7 +30,7 @@ module.exports = function($) {
     const demo = $(buildDemoSection(defferedAttr, title, innerUl, content));
     $el.replaceWith(demo);
   });
-};
+}
 
 /**
  * ツールボタンたちのulの中身を返す