added first documentation

packages/compiler/src/core/plugin/nodes/tags/TemplateTagNode.ts

@@ -7,9 +7,9 @@ export class TemplateTagNode extends TagNode {
 
     public toPugNode() {
         // Template tags can only have one children
-        if (this.getChildren().filter((child) => child.isType("Comment")).length > 1) {
+        /*if (this.getChildren().filter((child) => child.isType("Comment")).length > 1) {
             throw this.makeParseError("Template tags should only have one children");
-        }
+        }*/
 
         return super.toPugNode();
     }

packages/docs/builder.js

@@ -0,0 +1,113 @@
+import remarkGfm from "remark-gfm";
+import remarkTwemoji from "remark-twemoji";
+import remarkCodeSandbox from "remark-codesandbox";
+import remarkHint from "remark-hint";
+import remarkHtml from "remark-html";
+
+import remarkHighlight from "./plugins/remark-highlight.js";
+ 
+import { defaultSchema } from "hast-util-sanitize";
+import merge from "deepmerge";
+ 
+// Import the highlighter
+import prism from "prismjs";
+import "prismjs/components/prism-pug.js";
+import "prismjs/components/prism-javascript.js";
+import "prismjs/components/prism-sass.js";
+import "prismjs/components/prism-typescript.js";
+
+import webpack from "webpack";
+
+// Preserve className attributes when sanitizing the HTML
+// This is necessary for syntax highlighting
+const schema = merge(defaultSchema, {
+    attributes: {
+        span: ["className"],
+        code: ["className"]
+    }
+});
+
+/**
+ * @see hints: https://github.com/sergioramos/remark-hint
+ */
+
+const config = {
+    entry: process.cwd() + "/src/index.js",
+    output: {
+        path: process.cwd() + "/dist",
+        filename: "index.js",
+        publicPath: "./"
+    },
+    cache: false,
+    mode: "development",
+    devtool: "source-map",
+    module: {
+        rules: [
+            {
+                test: /\.pupper$/,
+                use: ["@pupperjs/webpack-loader"]
+            },
+            {
+                test: /\.js$/,
+                enforce: "pre",
+                use: ["source-map-loader"],
+            },
+            {
+                test: /\.md$/,
+                use: [
+                    {
+                        loader: "html-loader",
+                    },
+                    {
+                        loader: "remark-loader",
+                        options: {
+                            remarkOptions: {
+                                plugins: [
+                                    remarkTwemoji,
+                                    remarkGfm,
+                                    remarkCodeSandbox,
+                                    remarkHint,
+                                    [remarkHtml, {
+                                        sanitize: false
+                                    }],
+                                    [remarkHighlight, {
+                                        highlight: (code, language) => {
+                                            const grammar = prism.languages[language];
+
+                                            if (grammar) {
+                                                code = prism.highlight(code, grammar);
+                                            }
+
+                                            return code;
+                                        }
+                                    }]
+                                ],
+                            },
+                        },
+                    },
+                ],
+            },
+        ]
+    }
+};
+
+const compiler = webpack(config);
+
+compiler.watch({
+    aggregateTimeout: 300,
+    poll: undefined
+}, (err, stats) => {
+    if (err) {
+        console.error(err.stack || err);
+
+        if (err.details) {
+            console.error(err.details);
+        }
+
+        return;
+    }
+
+    console.log(stats.toString({
+        colors: true
+    }));
+});

packages/docs/package.json

@@ -5,14 +5,29 @@
   "repository": "https://github.com/pupperjs/pupperjs/packages/docs",
   "license": "MIT",
   "private": true,
+  "type": "module",
   "scripts": {
-    "watch": "webpack"
+    "watch": "node ./builder"
   },
   "dependencies": {
-    "@pupperjs/webpack-loader": "file:./../webpack-loader"
+    "@pupperjs/webpack-loader": "file:./../webpack-loader",
+    "remark-html": "^15.0.1"
   },
   "devDependencies": {
     "copy-webpack-plugin": "^11.0.0",
+    "deepmerge": "^4.2.2",
+    "escape-html": "^1.0.3",
+    "hast-util-sanitize": "^4.0.0",
+    "html-loader": "^3.1.2",
+    "prismjs": "^1.28.0",
+    "remark": "^14.0.2",
+    "remark-codesandbox": "^0.10.1",
+    "remark-gfm": "^3.0.1",
+    "remark-hint": "^1.0.10",
+    "remark-loader": "^5.0.0",
+    "remark-twemoji": "^0.1.1",
+    "twemoji": "^14.0.2",
+    "unist-util-visit": "^4.1.0",
     "webpack": "^5.73.0"
   }
 }

packages/docs/plugins/remark-highlight.js

@@ -0,0 +1,29 @@
+import { visit } from "unist-util-visit";
+import escape from "escape-html";
+
+export default function highlighter(options) {
+    return function(ast) {
+        visit(ast, "code", function(node) {
+            if (!node.lang) {
+                return;
+            }
+
+            const highlight = function(code) {
+                const html = code == null ? escape(node.value) : code;
+
+                node.type = "html";
+                node.value = [
+                    "<pre>",
+                        "<code class=\"language-" + node.lang + "\">",
+                            html,
+                        "</code>",
+                    "</pre>",
+                ].join("\n");
+            };
+
+            const result = options.highlight(node.value, node.lang);
+
+            return highlight(result);
+        });
+    };
+};

packages/docs/src/components/App.pupper

@@ -14,5 +14,16 @@ template
             //- Load the landing page component
             LandingComponent
 
+style(lang="sass")
+    .hint {
+        padding: 1rem;
+        border-radius: 0.25rem;
+        
+        &.tip {
+            background-color: var(--info);
+            color: #fff;
+        }
+    }
+
 data
     isDocs = new URL(window.location.href).hash.includes("docs")

packages/docs/src/components/DocsComponent.pupper

@@ -1,10 +1,12 @@
-import ComponentsComponent(from="./docs/essentials/ComponentsComponent.pupper")
+import SyntaxComponent(from="../documentation/essentials/Syntax.md")
 
 template
+    link(rel="stylesheet", href="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/themes/prism.min.css")
+
     .m-3
         .row
             //- Sidebar
-            .col-12.col-lg-4
+            .col-12.col-lg-4.col-xl-3
                 each section in sections
                     div
                         strong=section.title
@@ -17,16 +19,17 @@ template
                                 )=subSection.title
 
             //- Section content
-            .col-12.col-lg-6
+            .col-12.col-lg-6.col-xl-7.mt-3.mt-lg-0
                 slot(name="section")
+
 data
     sections = [
         {
             title: "Essentials",
             subSections: [
                 {
-                    title: "Components",
-                    component: ComponentsComponent
+                    title: "Syntax",
+                    component: SyntaxComponent
                 }
             ]
         }
@@ -34,5 +37,7 @@ data
 
 implementation
     #changeToSection(section)
-        console.log(this);
-        section.component.mount(this.$slots.section);
+        const template = document.createElement("template");
+        template.innerHTML = section.component;
+
+        this.$slots.section.replace(template.content);

packages/docs/src/components/docs/essentials/ComponentsComponent.pupper

@@ -1,2 +0,0 @@
-template
-    h3.display-4|Components

packages/docs/src/documentation/essentials/Syntax.md

@@ -0,0 +1,45 @@
+## Syntax
+pupper syntax is based in [pug](https://pugjs.org/api/getting-started.html).
+
+<br/>
+
+### Attributes
+It is very semantical and natural to write in pupper.
+Tag and attributes look similar to HTML, but with commas separating the attributes. Their values are just regular JavaScript.
+
+```pug
+a(href="//google.com") Google
+```
+
+Normal JavaScript works fine with components:
+
+```pug
+template
+    body(class=authenticated ? "authed" : "anon")
+data
+    authed = false
+```
+
+### Multi-line Attributes
+If you have many attributes, you can also spread them across many lines:
+
+```pug
+input(
+    type="checkbox",
+    name="agreement",
+    checked
+)
+```
+
+!>
+    You can use template literals for syntax attributes.
+    This is very useful for attributes with really long values:
+
+```pug
+input(data-very-long-json=`
+    {
+        "very-long": "piece of ",
+        "data": true
+    }
+`)
+```

packages/docs/webpack.config.js

@@ -1,28 +0,0 @@
-const CopyPlugin = require("copy-webpack-plugin");
-const path = require("path");
-
-module.exports = {
-    entry: __dirname + "/src/index.js",
-    output: {
-        path: __dirname + "/dist",
-        filename: "index.js",
-        publicPath: "./"
-    },
-    cache: false,
-    watch: true,
-    mode: "development",
-    devtool: "source-map",
-    module: {
-        rules: [
-            {
-                test: /\.pupper$/,
-                use: ["@pupperjs/webpack-loader"]
-            },
-            {
-                test: /\.js$/,
-                enforce: "pre",
-                use: ["source-map-loader"],
-            },
-        ]
-    }
-}