Merge pull request #283 from yhatt/deno-npm-compatibillity

Improve compatibility with npm support for Deno

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Fixed
+
+- Improve compatibility with npm support for Deno ([#283](https://github.com/yhatt/jsx-slack/pull/283))
+
 ## v5.2.0 - 2022-10-29
 
 ### Added

README.md

@@ -73,19 +73,22 @@ Now you can begin to write the code with [`jsxslack` template literal tag](#quic
 
 ### [Deno](https://deno.land/) ([Slack CLI](https://api.slack.com/future/tools/cli))
 
-We have Deno support through [esm.sh](https://esm.sh/) CDN. jsx-slack requires Deno v1.16 and later for using JSX transpilation.
+We also have Deno support. If you are using Deno v1.28 and later, [you can import jsx-slack through npm directly](https://deno.land/manual/node/npm_specifiers).
 
 ```typescript
 // `jsxslack` template literal tag
-import { jsxslack } from 'https://esm.sh/jsx-slack'
+import { jsxslack } from 'npm:jsx-slack@5'
 ```
 
 ```typescript
-// JSX transpilation (Deno >= v1.16)
-/** @jsxImportSource https://esm.sh/jsx-slack */
-import { Blocks, Section } from 'https://esm.sh/jsx-slack'
+// JSX transpilation (for Deno v1.16 and later)
+/** @jsxImportSource npm:jsx-slack@5 */
+import { Blocks, Section } from 'npm:jsx-slack@5'
 ```
 
+> **Note**
+> Alternatively [you also can import jsx-slack through esm.sh CDN](https://deno.land/manual@v1.28.1/node/cdns#esmsh): [`https://esm.sh/jsx-slack@5`](https://esm.sh/jsx-slack@5)
+
 ## Usage
 
 ### Quick start: Template literal
@@ -112,7 +115,7 @@ export const exampleBlock = ({ name }) => jsxslack`
 
 When you want to use jsx-slack with JSX transpiler, you have to set up to use our runtime for JSX.
 
-**[▶︎ How to setup JSX transpiler](docs/how-to-setup-jsx-transpiler.md)** (Babel / TypeScript / Deno / esbuild)
+**[▶︎ How to setup JSX transpiler](docs/how-to-setup-jsx-transpiler.md)** (Babel / TypeScript / Deno)
 
 ```jsx
 /** @jsxImportSource jsx-slack */

docs/how-to-setup-jsx-transpiler.md

@@ -7,7 +7,6 @@
 - [Babel](#babel)
 - [TypeScript](#typescript)
 - [Deno](#deno) (Slack CLI)
-- [esbuild](#esbuild)
 
 ## [Babel](https://babeljs.io/) <a name="user-content-babel" id="babel"></a>
 
@@ -134,7 +133,7 @@ Or you can instruct to use jsx-slack in all TSX files by setting up `tsconfig.js
 }
 ```
 
-###### Classic (TypeScript <= 4.0 and esbuild) <a name="user-content-typescript-classic" id="typescript-classic"></a>
+###### Classic (TypeScript <= 4.0) <a name="user-content-typescript-classic" id="typescript-classic"></a>
 
 If your using build tool has not yet supported TypeScript `react-jsx` mode, try using a classic `react` mode.
 
@@ -206,16 +205,19 @@ api.chat.postMessage({
 
 ## [Deno](https://deno.land/) (Slack CLI) <a name="user-content-deno" id="deno"></a>
 
-_Please note that [it requires Deno v1.16 and later](https://deno.com/blog/v1.16#support-for-new-jsx-transforms)._
+_[Importing jsx-slack from npm requires Deno v1.28 and later](https://deno.com/blog/v1.28#using-npm)._
 
-Deno uses TypeScript so the most parts are exactly same as described in [TypeScript](#typescript) section. An important difference is using `https://esm.sh/jsx-slack` to import module.
+Deno uses TypeScript so the most parts are exactly same as described in [TypeScript](#typescript) section. An important difference is using `npm:jsx-slack@5` to import module.
+
+> **Note**
+> Alternatively [you also can import jsx-slack through esm.sh CDN](https://deno.land/manual@v1.28.1/node/cdns#esmsh) ([`https://esm.sh/jsx-slack@5`](https://esm.sh/jsx-slack@5)). Try ESM CDN if you are using old Deno version that has not supported npm.
 
 ### Comment pragma
 
 ```jsx
 // main.tsx
-/** @jsxImportSource https://esm.sh/jsx-slack */
-import { Blocks, Section } from 'https://esm.sh/jsx-slack'
+/** @jsxImportSource npm:jsx-slack@5 */
+import { Blocks, Section } from 'npm:jsx-slack@5'
 
 console.log(
   <Blocks>
@@ -233,25 +235,27 @@ console.log(
 {
   "compilerOptions": {
     "jsx": "react-jsx",
-    "jsxImportSource": "https://esm.sh/jsx-slack"
+    "jsxImportSource": "npm:jsx-slack@5"
     // ...
   }
 }
 ```
 
-###### Classic (Deno <= 1.15) <a name="user-content-deno-classic" id="deno-classic"></a>
+###### Classic <a name="user-content-deno-classic" id="deno-classic"></a>
+
+[Setting up JSX transpilation with this spec requires Deno v1.16 and later](https://deno.com/blog/v1.16#support-for-new-jsx-transforms). If you are using Deno v1.15 and former, you should set up JSX with a classic way.
 
 <details>
 <summary>How to transpile JSX with classic way in Deno... 👉</summary>
 
 #### Comment pragma
 
-_You should always import `JSXSlack` from `jsx-slack` ESM CDN in every TSX files._
+_You should always import `JSXSlack` from `https://esm.sh/jsx-slack@5` in every TSX files._
 
 ```jsx
 /** @jsx JSXSlack.h **/
 /** @jsxFrag JSXSlack.Fragment **/
-import { JSXSlack, Blocks, Section } from 'https://esm.sh/jsx-slack'
+import { JSXSlack, Blocks, Section } from 'https://esm.sh/jsx-slack@5'
 
 console.log(
   <Blocks>
@@ -285,52 +289,36 @@ You also can define [import maps](https://deno.land/manual/linking_to_external_c
 ```json
 {
   "imports": {
-    "jsx-slack": "https://cdn.skypack.dev/jsx-slack?dts",
-    "jsx-slack/jsx-runtime": "https://cdn.skypack.dev/jsx-slack/jsx-runtime?dts",
-    "jsx-slack/jsx-dev-runtime": "https://cdn.skypack.dev/jsx-slack/jsx-dev-runtime?dts"
+    "jsx-slack": "npm:jsx-slack@5",
+    "jsx-slack/jsx-runtime": "npm:jsx-slack@5/jsx-runtime",
+    "jsx-slack/jsx-dev-runtime": "npm:jsx-slack@5/jsx-dev-runtime"
   }
 }
 ```
 
-Then you can use the comment pragma and `import` statement as following.
+Then you can use the comment pragma and `import` statement as following. Your JSX/TSX source codes can make compatible with Node.js.
 
 ```tsx
 /** @jsxImportSource jsx-slack */
 import { Blocks, Section } from 'jsx-slack'
 ```
 
-This will make your JSX/TSX source codes compatible with Node.js. In addition, the import maps also helpful for using alternative ESM CDN like [skypack.dev](https://skypack.dev/). [See the Deno manual for more details.](https://deno.land/manual@v1.16.0/jsx_dom/jsx#using-an-import-map)
-
-## [esbuild](https://esbuild.github.io/) <a name="user-content-esbuild" id="esbuild"></a>
-
-esbuild does not have supported JSX automatic runtime ([evanw/esbuild#334](https://github.com/evanw/esbuild/issues/334)) so you have to always use the classic way to transpile JSX.
-
-If you are using TypeScript in esbuild, _please refer to [the classic section of TypeScript](#typescript-classic) instead._
-
-### Comment pragma
-
-_You should always import `JSXSlack` from `jsx-slack` in every JSX files._
+In addition, the import maps is also helpful for using alternative ESM CDN. [See the Deno manual for more details.](https://deno.land/manual/jsx_dom/jsx#using-an-import-map)
 
-```jsx
-// main.jsx
-/** @jsx JSXSlack.h **/
-/** @jsxFrag JSXSlack.Fragment **/
-import { JSXSlack, Blocks, Section } from 'jsx-slack'
+<details>
+<summary>Example: Use Skypack CDN...</summary>
 
-console.log(
-  <Blocks>
-    <Section>
-      <p>Hello, world!</p>
-    </Section>
-  </Blocks>
-)
+```json
+{
+  "imports": {
+    "jsx-slack": "https://cdn.skypack.dev/jsx-slack?dts",
+    "jsx-slack/jsx-runtime": "https://cdn.skypack.dev/jsx-slack/jsx-runtime?dts",
+    "jsx-slack/jsx-dev-runtime": "https://cdn.skypack.dev/jsx-slack/jsx-dev-runtime?dts"
+  }
+}
 ```
 
-### [CLI](https://esbuild.github.io/content-types/#using-jsx-without-react)
-
-```bash
-esbuild main.jsx --jsx-factory=JSXSlack.h --jsx-fragment=JSXSlack.Fragment
-```
+</details>
 
 ---
 

src/components.ts

@@ -1,6 +1,6 @@
 import { JSXSlack } from './jsx'
 
-export * from './block-kit'
+export * from './block-kit/index'
 export { Escape } from './mrkdwn/jsx'
 
 /** An alias into `JSXSlack.Fragment`, to group a list of JSX elements. */