elegance-js 1.1.4 → 1.2.1

package/dist/compile_docs.mjs

@@ -1061,7 +1061,7 @@ var compile = async (props) => {
 };
 
 // src/compile_docs.ts
-import { execSync } from "child_process";
+import { exec, execSync } from "child_process";
 import path2 from "path";
 var __dirname2 = path2.dirname(fileURLToPath2(import.meta.url));
 var PAGES_DIR = path2.join(__dirname2, "../src/docs");
@@ -1078,11 +1078,14 @@ compile({
   publicDirectory: {
     path: PUBLIC_DIR,
     method: environment === "production" ? "recursive-copy" : "symlink"
+  },
+  server: {
+    runServer: environment === "development"
   }
 }).then(() => {
   if (environment === "production") {
     execSync(`npx @tailwindcss/cli -i ${PAGES_DIR}/index.css -o ${OUTPUT_DIR}/dist/index.css --minify`);
   } else {
-    execSync(`npx @tailwindcss/cli -i ${PAGES_DIR}/index.css -o ${OUTPUT_DIR}/dist/index.css --watch=always`);
+    exec(`npx @tailwindcss/cli -i ${PAGES_DIR}/index.css -o ${OUTPUT_DIR}/dist/index.css --watch=always`);
   }
 });

package/dist/docs/docs/basics/page.mjs

@@ -668,18 +668,7 @@ var Mono = (text) => span({
   class: "font-mono select-text"
 }, text);
 
-// src/docs/docs/components/Subtext.ts
-var Subtext = (text) => span({
-  class: "text-xs opacity-60",
-  innerText: text
-});
-
 // src/docs/docs/basics/page.ts
-var demoPageTS = `export const page = body ({
-    style: "background-color: #000; color: #fff;",
-},
-    h1 ("Greetings Traveler!"),
-);`;
 var bodyCallResult = `
 {
     tag: "body",
@@ -697,19 +686,15 @@ var bodyCallResult = `
     ],
 }
 `;
+var demoPageTS = `export const page = body ({
+    style: "background-color: #000; color: #fff;",
+},
+    h1 ("Greetings Traveler!"),
+);`;
 var demoInfoTS = `export const metadata = () => head (
     title ("The BEST Page Ever!"),
 );
 `;
-var demoIndexTs = `import { compile } from "elegance-js/build";
-
-compile({
-    environment: "development",
-    outputDirectory: "./.elegance",
-    pagesDirectory: "./pages",
-    writeToHTML: true,
-});`;
-var demoFirstPage = `export const page = body ("Greetings Traveller!");`;
 var metadata = () => head(
   {},
   link({
@@ -732,7 +717,7 @@ var page = RootLayout(
       {
         class: "opacity-80"
       },
-      "Elegance is still in very early development.",
+      "Elegance is still only in Beta.",
       br(),
       "There are absolutely no guarantees of backwards compatibility, security or really anything.",
       br(),
@@ -882,6 +867,11 @@ var page = RootLayout(
       Mono("compile()"),
       " which your project should call to build itself.",
       br(),
+      "This is typically done via the use of the built in build scripts.",
+      br(),
+      "However, if you wish to customize your build options, you need just create a file which calls compile.",
+      br(),
+      br(),
       "Compilation handles generating page_data files, ",
       "HTML, JSON, transpilation of ts into js, etc.",
       br(),
@@ -897,274 +887,105 @@ var page = RootLayout(
     ),
     h3({
       class: "text-lg font-medium mb-1",
-      innerText: "GitHub"
+      innerText: "NPM"
     }),
     p(
       {
         class: "opacity-80"
       },
-      "As Elegance is still in it's formative stages, ",
-      "we haven't yet published to things like the NPM registry.",
+      "To make an elegance project, first create a directory with a name of your choosing.",
       br(),
-      "However, installation is still quite simple.",
+      "For this example, we'll use ",
+      Mono("my-first-webpage"),
       br(),
-      br(),
-      "First, decide where you'll want Elegance to live. ",
-      br(),
-      "On a linux-based system, somewhere like ",
-      Mono("~/bin/elegance"),
-      " is a good place.",
-      br(),
-      b("Just remember where it is! You'll need it later."),
-      br(),
-      br(),
-      "Install ",
-      a({
-        href: "https://git-scm.com/",
-        class: "border-b-2 border-text-50"
-      }, "git"),
-      " for your system, if you haven't already.",
-      br(),
-      br(),
-      "Next, open a terminal / command prompt window, and issue the following the command."
-    ),
-    CodeBlock("git clone https://github.com/valdemar-dev/elegance-js [your destination folder]", false),
-    p(
-      {
-        class: "opacity-80"
-      },
-      "You have now installed Elegance.JS onto your system. Congratulations!"
-    ),
-    Separator(),
-    PageHeading(
-      "Your First Page",
-      "your-first-page"
+      "Then, in that directory, issue the following command to initialize an empty NPM project."
     ),
-    h3({
-      class: "text-lg font-medium mb-1",
-      innerText: "Making a Project"
-    }),
+    CodeBlock("npm init -y", false),
     p(
       {
         class: "opacity-80"
       },
-      "Now that Elegance is installed on your machine, it's time to make your first page.",
-      br(),
-      "With your terminal still open, go ahead and make a new a directory where your project will live.",
-      br(),
-      br(),
-      "Once that's done, navigate to the directory you just made, and run this command."
+      "After this, install elegance-js by running"
     ),
-    CodeBlock("npm init -y && npm install esbuild", false),
+    CodeBlock("npm install elegance-js", false),
     p(
       {
         class: "opacity-80"
       },
-      "This will initialize npm, and install ",
-      b("esbuild"),
-      ", Elegances only dependency.",
-      br(),
-      br(),
-      "For the unitiated, esbuild is a ridiculously fast JS bundler written in Go."
+      "And that's it! Elegance.js has been installed into your project."
     ),
-    p(
-      {
-        class: "opacity-80"
-      },
-      "Next, you'll need to link Elegance to your project."
+    Separator(),
+    PageHeading(
+      "Your First Page",
+      "your-first-page"
     ),
-    CodeBlock("npm link [where you installed elegance]", false),
-    Subtext("(you might need sudo for this if you're on linux)"),
-    div({
-      class: "my-10"
-    }),
     h3({
       class: "text-lg font-medium mb-1",
-      innerText: "Typescript Configuration"
+      innerText: "Making a Project"
     }),
     p(
       {
         class: "opacity-80"
       },
-      "Now, for the TypeScript users, you'll want to do these next few steps.",
-      br(),
-      "First, boostrap a ",
-      Mono("tsconfig.json"),
-      " so typescript works properly.",
-      "Set the compiler target to ",
-      Mono("esnext"),
-      " and module to ",
-      Mono("esnext"),
-      br(),
-      Subtext("Note: You might need to set your moduleResolution as bundler, or this might not work."),
-      br(),
-      br(),
-      "Create a file at the root of your project called ",
-      Mono("env.d.ts"),
-      br(),
-      "And put this inside of it."
-    ),
-    CodeBlock('/// <reference path="elegance-js/global" />', false),
-    p(
-      {
-        class: "opacity-80"
-      },
-      "This takes the ambient global types from Elegance, and puts them into your project.",
-      br(),
-      "If all goes well, Elegance should be setup fully now!"
+      "To bootstrap an Elegance.js project, run the following command in the directory we just made."
     ),
-    div({
-      class: "my-10"
-    }),
-    h3({
-      class: "text-lg font-medium mb-1",
-      innerText: "Creating Pages"
-    }),
+    CodeBlock("npx bootstrap", false),
     p(
       {
         class: "opacity-80"
       },
-      "Like we mentioned earlier, a page requires just one file. ",
-      Mono("page.ts"),
+      "This will create a few files and directories for you.",
       br(),
-      "So, let's create that, shall we?",
-      br(),
-      br(),
-      "At the root of your project, create a directory. You can call it pages, app, whatever you want.",
-      br(),
-      br(),
-      "In this new directory, create a ",
+      "Firstly, it creates the aforementioned pages directory, and an example ",
       Mono("page.ts"),
       " file.",
       br(),
-      "Just for a start, put something simple into it. Like this.",
-      br(),
-      "We'll get whacky and crazy later on, don't worry."
-    ),
-    CodeBlock(demoFirstPage),
-    CodeBlock(demoInfoTS),
-    div({
-      class: "my-10"
-    }),
-    h3({
-      class: "text-lg font-medium mb-1",
-      innerText: "Building your Project"
-    }),
-    p(
-      {
-        class: "opacity-80"
-      },
-      "Create an ",
-      Mono("index.ts"),
-      " file at the root of your project.",
-      br(),
-      br(),
-      "Elegance exposes the ",
-      Mono("compile()"),
-      " function from it's build process,",
-      br(),
-      "which we'll be using to compile your project."
-    ),
-    CodeBlock(demoIndexTs),
-    p(
-      {
-        class: "opacity-80"
-      },
-      "Here's an example usage of the ",
-      Mono("compile()"),
-      " function.",
-      br(),
-      br(),
-      Mono('environment: "development"'),
-      br(),
-      " Means that Elegance won't minify your page code, and will create a 'watch-server',",
-      br(),
-      "which will auto-reload your pages when you save them.",
-      br(),
       br(),
-      Mono('outputDirectory: "./.elegance"'),
+      "Then it makes a public directory where you can store files",
       br(),
-      " This is where Elegance will put it's compiled files into.,",
+      "that you want to be publicly accessible on your website.",
       br(),
-      "We wouldn't recommend changing this, however, you can, if need be.",
       br(),
+      "Thirdly, it creates an ",
+      Mono("env.d.ts + tsconfig.json"),
       br(),
-      Mono('pagesDirectory: "./pages"'),
+      "which gives you ambient global typings for the elements that are in Elegance.",
       br(),
-      "This is the directory where you put your pages.",
       br(),
-      "You should make it match whatever you named the directory obviously.",
+      "Lastly, it creates a file in the pages directory called ",
+      Mono("index.css"),
       br(),
-      br(),
-      Mono("writeToHTML: true"),
-      br(),
-      "This makes Elegance write static HTML files, instead of keeping the generated page JSON",
-      br(),
-      "You can turn this off if you want to server render per-request.",
-      br(),
-      br(),
-      ""
+      "which tailwind will automatically compile and put in your dist folder."
     ),
     div({
       class: "my-10"
-    }),
+    }, []),
     h3({
       class: "text-lg font-medium mb-1",
-      innerText: "Running your Project"
+      innerText: "Running your project."
     }),
     p(
       {
         class: "opacity-80"
       },
-      "You can choose how to run your own project. ",
-      br(),
-      "Elegance ",
-      i("should "),
-      "work with most JS runtimes like Node, Deno, etc.",
+      "There's a few way to run elegance.",
       br(),
-      "However some (like Deno), may require a little tweaking.",
       br(),
-      br(),
-      Link(
-        {
-          href: "/docs/running",
-          class: "border-b-2"
-        },
-        "More about running here."
-      )
-    ),
-    div({
-      class: "my-10"
-    }),
-    p(
-      {
-        class: "opacity-80"
-      },
-      "For the purposes of this tutorial, we'll try to keep it simple.",
-      br(),
-      "Simply issue the following commands in your terminal."
+      "The intended way is using our provided scripts."
     ),
-    CodeBlock("npx tsx index.ts", false),
-    CodeBlock("python3 -m http.server 3000 -d .elegance", false),
+    CodeBlock("npx dev", false),
+    CodeBlock("npx prod", false),
+    CodeBlock("npx static", false),
     p(
       {
         class: "opacity-80"
       },
-      "This'll take your ",
-      Mono("index.ts"),
-      " run it, and then serve the ",
+      "However, you may also serve the files in any way you like.",
       br(),
-      "generated files over a simple Python HTTP server.",
       br(),
+      "API Routes will not be available without the built-in Elegance server,",
       br(),
-      "And that's it! You can view your shiny new webpage at the URL, ",
-      a(
-        {
-          href: "http://localhost:3000/",
-          class: "border-b-2"
-        },
-        "localhost:3000."
-      )
+      "but all static content like event listeners, load hooks, pages, etc, will work."
     )
   )
 );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elegance-js",
-  "version": "1.1.4",
+  "version": "1.2.1",
   "description": "Web-Framework",
   "type": "module",
   "bin": {

package/scripts/bootstrap.js

@@ -18,26 +18,86 @@ const envDtsPath = "env.d.ts";
 const tsconfigPath = "tsconfig.json";
 
 const pageTsContent = `
-export const page = body({
-    class: "bg-black text-white flex items-center justify-center p-48",
+import { createEventListener, createState } from "elegance-js/server/createState";
+import { createLoadHook } from "elegance-js/server/loadHook";
+import { observe } from "elegance-js/server/observe";
+
+const counter = createState(0);
+
+createLoadHook({
+    deps: [counter],
+    fn: (_, counter) => {
+        const interval = setInterval(() => {
+            counter.value++;
+            counter.signal();
+        }, 1000);
+        
+        return () => clearInterval(interval);
+    },
+})
+
+export const page = body ({
+    class: "text-white flex min-h-screen items-start sm:justify-center p-4 bg-black flex-col gap-4 max-w-[500px] w-full mx-auto",
 },
-    h1({
-        class: "text-4xl",
+    h1 ({
+        class: "text-4xl font-inter font-semibold bg-clip-text text-transparent bg-gradient-to-tl from-[#EEB844] to-[#FF4FED] oveflow-clip",
     },
         "Welcome to Elegance.JS!",
     ),
+    
+    p ({
+    }, 
+        "Edit page.ts to get started.",
+    ),
+    
+    div({
+        class: "flex items-start gap-4 mt-2",
+    },
+        a ({
+            class: "px-4 py-2 rounded-md bg-red-400 text-black font-semibold relative group hover:scale-[1.05] duration-200",
+            href: "https://elegance.js.org/",
+            target: "_blank",
+        },
+            "Documentation",
+            
+            div ({
+                class: "blur-[50px] absolute group-hover:bg-red-400 inset-0 bg-transparent duration-200 pointer-events-none -z-10",
+                "aria-hidden": "true",
+            }),
+        ),
+            
+        button ({
+            class: "hover:cursor-pointer px-4 py-2 rounded-md bg-zinc-200 text-black font-semibold relative group hover:scale-[1.05] duration-200",
+            onClick: createEventListener({
+                dependencies: [counter],
+                eventListener: (_, counter) => {
+                    counter.value++;
+                    
+                    counter.signal();
+                },
+            }),
+            
+            innerText: observe([counter], (counter) => \`Counter: ${counter}\`),
+        },
+            div ({
+                class: "blur-[50px] absolute group-hover:bg-zinc-200 inset-0 bg-transparent duration-200 pointer-events-none -z-10",
+                "aria-hidden": "true",
+            }),
+        ),
+    )
 );
 
-export const metadata = () => head({},
-    link({
+export const metadata = () => head ({},
+    link ({
         rel: "stylesheet",
         href: "/index.css",
     }),
     
-    title({},
-        "Hello World!"
+    title ({},
+        "Elegance.JS"
     ),
 )
+
 `;
 
 const envDtsContent = `/// <reference types="elegance-js/global" />`;
@@ -56,8 +116,22 @@ const tsconfigContent = JSON.stringify({
   exclude: ["node_modules"],
 }, null, 2);
 
+const indexCssContent = `
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+
+* {
+    line-height: normal;
+}
+
+@import "tailwindcss";
+
+@theme {
+    --font-inter: "Inter", sans-serif;
+}
+`;
+
 fs.writeFileSync(pageTsPath, pageTsContent, "utf8");
-fs.writeFileSync(indexCssPath, "", "utf8");
+fs.writeFileSync(indexCssPath, indexCssContent, "utf8");
 fs.writeFileSync(envDtsPath, envDtsContent, "utf8");
 fs.writeFileSync(tsconfigPath, tsconfigContent, "utf8");