create a basic glimmer.js application

very-geek · Dec 24, 2020 · f208956 · f208956
1 parent 196b43e
commit f208956
Show file tree

Hide file tree

Showing 7 changed files with 2,342 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -8,14 +8,19 @@
 ```shell
 # 初始化版本控制
 $ git init
+
 # 初始化 npm 项目
 $ yarn init
+
 # 添加 snowpack 作为开发时依赖
 $ yarn add --dev snowpack@next
+
 # 生成 snowpack 的初始配置文件
 $ yarn snowpack init
+
 # 运行 snowpack 检查安装正确性
 $ yarn snowpack dev
+
 # 运行 snowpack build 测试构建
 $ yarn snowpack build
 ```
@@ -26,3 +31,40 @@ $ yarn snowpack build
 在也没有几天了（项目创建于 2020 年圣诞）。在 _v3_ 这个版本有一些值得尝试的新特
 性，详情参见：
 https://www.snowpack.dev/posts/2020-12-03-snowpack-3-release-candidate
+
+## 步骤二、添加 Glimmer.js
+
+> 以下软件包可以一起安装，分开写是为了方便写注释
+
+```shell
+# 安装 glimmer.js 的核心包
+$ yarn add --dev @glimmerx/core @glimmerx/component
+
+# 安装 glimmer.js 编译模板的 babel plugin
+$ yarn add --dev @glimmerx/babel-plugin-component-templates
+
+# 安装支持 class properties 的 babel plugin
+$ yarn add --dev @babel/plugin-proposal-class-properties
+
+# 安装支持 decorators 的 babel plugin
+$ yarn add --dev @babel/plugin-proposal-decorators
+
+# 安装 snowpack 的 babel plugin
+$ yarn add --dev @snowpack/plugin-babel
+```
+
+随后编写一个最简单的 Glimmer Application，参见 `src` 目录下的改动。
+
+### 关于 babel 和相关的插件
+
+尽管 snowpack 内置了对于 JavaScript / JSX 和 TypeScript / TSX 的支持，但
+Glimmer.js 的模板需要在构建时编译（不是运行时编译的），为此 Glimmer.js 提供了构
+建时所用的 babel plugin，于是就需要调整 snowpack 的配置，让它把源码的编译转交给
+babel 来处理。
+
+这一步并不复杂，因为 snowpack 也提供了 babel plugin，只需要对
+`snowpack.config.js` 做简单的修改即可。
+
+值得注意的是，当 snowpack 使用了 babel plugin 之后，会自动读取默认的 babel
+config 文件，也就是 `babel.config.*`，所以也可以把相关的配置选项写到此处。但本项
+目为了简明扼要并没有这么做。
diff --git a/package.json b/package.json
@@ -8,6 +8,13 @@
   "license": "MIT",
   "private": true,
   "devDependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/plugin-proposal-decorators": "^7.12.12",
+    "@glimmer/babel-plugin-glimmer-env": "^2.0.0-beta.1",
+    "@glimmerx/babel-plugin-component-templates": "^0.3.0",
+    "@glimmerx/component": "^0.3.0",
+    "@glimmerx/core": "^0.3.0",
+    "@snowpack/plugin-babel": "^2.1.5",
     "snowpack": "^3.0.0-rc.2"
   },
   "scripts": {

diff --git a/public/index.html b/public/index.html
@@ -3,15 +3,12 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta
-      name="description"
-      content="A glimmer.js app that built by snowpack."
-    />
+    <meta name="description" content="Glimmer.js with snowpack." />
     <title>Welcome to glimmer.js</title>
     <link rel="stylesheet" href="/assets/index.css" />
   </head>
   <body>
-    <h1>Welcome to glimmer.js</h1>
+    <main class="glimmer-application"></main>
     <script src="/assets/index.js" type="module"></script>
   </body>
 </html>
diff --git a/snowpack.config.js b/snowpack.config.js
@@ -10,12 +10,33 @@ module.exports = {
   devOptions: {
     port: 4000,
   },
+  // 这是一个隐性依赖，项目并不会安装 @glimmer/core 而是安装 @glimmerx/core，但
+  // 运行时会报错，所以我们让 snowpack 负责安装这个依赖
+  install: ["@glimmer/core"],
+  // installOptions: {},
   mount: {
     // `public` 目录映射到应用程序根路径
     public: "/",
     // `src` 目录映射到应用程序 `/assets` 路径
     src: "/assets",
   },
-  // plugins: [],
-  // installOptions: {},
+  plugins: [
+    [
+      "@snowpack/plugin-babel",
+      {
+        input: [".js", ".jsx", ".mjs", ".ts", ".tsx"],
+        transformOptions: {
+          plugins: [
+            [
+              "@glimmer/babel-plugin-glimmer-env",
+              { DEBUG: process.env.NODE_ENV === "development" },
+            ],
+            "@glimmerx/babel-plugin-component-templates",
+            ["@babel/plugin-proposal-decorators", { legacy: true }],
+            "@babel/plugin-proposal-class-properties",
+          ],
+        },
+      },
+    ],
+  ],
 };
diff --git a/src/APP.js b/src/APP.js
@@ -0,0 +1,7 @@
+import Component, { hbs } from "@glimmerx/component";
+
+export default class Application extends Component {
+  static template = hbs`
+    <h1>Welcome to glimmer.js, built with snowpack, yay!</h1>
+  `;
+}
diff --git a/src/index.js b/src/index.js
@@ -1 +1,5 @@
-console.log("Hello, snowpack!");
+import { renderComponent } from "@glimmerx/core";
+import Application from "./APP";
+
+const rootElement = document.querySelector(".glimmer-application");
+renderComponent(Application, rootElement);