helfy-create 0.0.5 → 0.1.0

package/template/package.json

@@ -1,30 +1,29 @@
-{
-  "name": "{{PROJECT_NAME}}",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development rspack serve",
-    "build": "cross-env NODE_ENV=production rspack build"
-  },
-  "dependencies": {
-    "@helfy/helfy": "^0.0.9"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.20.0",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-decorators": "^7.21.0",
-    "@babel/plugin-proposal-private-methods": "^7.18.6",
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.0",
-    "@babel/preset-env": "^7.20.0",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.21.0",
-    "@helfy/helfy-ts-plugin": "^0.0.1",
-    "babel-loader": "^9.1.2",
-    "babel-plugin-transform-typescript-metadata": "^0.4.0",
-    "cross-env": "^7.0.3",
-    "css-loader": "^6.7.3",
-    "typescript": "^5.9.3",
-    "@rspack/cli": "^1.3.0",
-    "@rspack/core": "^1.3.0"
-  }
-}
+{
+  "name": "{{PROJECT_NAME}}",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development rspack serve",
+    "build": "cross-env NODE_ENV=production rspack build"
+  },
+  "dependencies": {
+    "@helfy/helfy": "^0.1.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-decorators": "^7.21.0",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.0",
+    "@babel/preset-env": "^7.20.0",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.0",
+    "@rspack/cli": "^1.3.0",
+    "@rspack/core": "^1.3.0",
+    "babel-loader": "^9.1.2",
+    "babel-plugin-transform-typescript-metadata": "^0.4.0",
+    "cross-env": "^7.0.3",
+    "css-loader": "^6.7.3",
+    "typescript": "^5.9.3"
+  }
+}

package/template/rspack.config.js

@@ -0,0 +1,76 @@
+const path = require('path');
+const { rspack } = require('@rspack/core');
+
+const isDev = process.env.NODE_ENV === 'development';
+
+const paths = {
+  src: path.resolve(__dirname, 'src'),
+  dist: path.resolve(__dirname, 'dist'),
+};
+
+module.exports = {
+  context: paths.src,
+  mode: isDev ? 'development' : 'production',
+  entry: './index.ts',
+  watchOptions: isDev
+    ? { ignored: ['**/node_modules/**', '**/.helfy/**'] }
+    : {},
+  devServer: {
+    hot: true,
+    port: 3000,
+    static: { directory: paths.src },
+    compress: true,
+    historyApiFallback: true,
+  },
+  output: {
+    filename: 'bundle.js',
+    path: paths.dist,
+    publicPath: '/',
+    clean: true,
+  },
+  resolve: {
+    modules: ['src', 'node_modules'],
+    extensions: ['.ts', '.js', '.hf', '.css'],
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+      '@context': path.resolve(__dirname, 'src/context'),
+      '@pages': path.resolve(__dirname, 'src/pages'),
+      '@widgets': path.resolve(__dirname, 'src/widgets'),
+    },
+  },
+  plugins: [
+    new rspack.HtmlRspackPlugin({
+      template: './index.html',
+      minify: !isDev,
+    }),
+    new rspack.CssExtractRspackPlugin({
+      filename: `css/${isDev ? '[name]' : '[contenthash:8]_[id]'}.css`,
+      ignoreOrder: true,
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        type: 'javascript/auto',
+        use: [
+          rspack.CssExtractRspackPlugin.loader,
+          { loader: 'css-loader', options: { importLoaders: 1 } },
+        ],
+      },
+      {
+        test: /\.hf$/,
+        exclude: /node_modules/,
+        use: [
+          'babel-loader',
+          require.resolve('@helfy/helfy/compiler/hf-loader'),
+        ],
+      },
+      {
+        test: /\.(ts|js)$/,
+        exclude: /node_modules/,
+        use: 'babel-loader',
+      },
+    ],
+  },
+};

package/template/src/App.hf

@@ -0,0 +1,20 @@
+import type { App } from "./App";
+import { ThemeContext } from "@context/ThemeContext";
+import { MainLayout } from "@pages/layouts/MainLayout";
+import { Header } from "@widgets/Header/Header";
+import { NavBar } from "@widgets/Navbar/Navbar";
+import { Footer } from "@widgets/Footer/Footer";
+import { AppRouter } from "@pages/_router";
+
+@template<App>() {
+  <ThemeContext>
+    <div class="app">
+      <MainLayout>
+        @slot.header -> <Header />
+        @slot.sidebar -> <NavBar />
+        @slot.content -> <AppRouter />
+        @slot.footer -> <Footer />
+      </MainLayout>
+    </div>
+  </ThemeContext>
+}

package/template/src/App.ts

@@ -0,0 +1,5 @@
+import { View } from "@helfy/helfy";
+import template from "./App.hf";
+
+@View({ template })
+export class App {}

package/template/src/context/ThemeContext.ts

@@ -0,0 +1,18 @@
+import { Context, state, effect } from "@helfy/helfy";
+
+export type TThemeMode = "light" | "dark";
+
+@Context
+export class ThemeContext {
+  @state mode: TThemeMode = "dark";
+
+  toggle = () => {
+    this.mode = this.mode === "dark" ? "light" : "dark";
+  };
+
+  /** Keeps class="dark" on <html> in sync with the mode. */
+  @effect
+  syncToDom() {
+    document.documentElement.classList.toggle("dark", this.mode === "dark");
+  }
+}

package/template/src/pages/AboutPage.hf

@@ -0,0 +1,12 @@
+import type { AboutPage } from "./AboutPage";
+
+@template<AboutPage>() {
+  <div class="page">
+    <h1>About</h1>
+    <p>This is a Helfy application with routing, slots, a theme context and a lazily loaded page.</p>
+    <p>
+      This page is a separate chunk loaded on the first visit — see <code>lazy()</code> in
+      <code>src/pages/_routes.ts</code>.
+    </p>
+  </div>
+}

package/template/src/pages/AboutPage.ts

@@ -0,0 +1,5 @@
+import { View } from "@helfy/helfy";
+import template from "./AboutPage.hf";
+
+@View({ template })
+export class AboutPage {}

package/template/src/pages/CounterPage.hf

@@ -0,0 +1,13 @@
+import type { CounterPage } from "./CounterPage";
+
+@template<CounterPage>() {
+  <div class="page">
+    <h1>Counter</h1>
+    <p>Count: <strong>{this.count}</strong> ({this.parity})</p>
+    <button class="btn" onclick={this.increment}>Increment</button>
+    <button class="btn" onclick={this.decrement}>Decrement</button>
+    @if (this.count >= 10) {
+      <p>That's a lot of clicks!</p>
+    }
+  </div>
+}

package/template/src/pages/CounterPage.ts

@@ -0,0 +1,15 @@
+import { View, state, computed } from "@helfy/helfy";
+import template from "./CounterPage.hf";
+
+@View({ template })
+export class CounterPage {
+  @state count = 0;
+
+  @computed
+  get parity() {
+    return this.count % 2 === 0 ? "even" : "odd";
+  }
+
+  increment = () => this.count++;
+  decrement = () => this.count--;
+}

package/template/src/pages/HomePage.hf

@@ -0,0 +1,17 @@
+import type { HomePage } from "./HomePage";
+
+@template<HomePage>() {
+  <div class="page">
+    <h1>Welcome to Helfy</h1>
+    <p>Helfy is a TypeScript UI framework with decorators, .hf templates and fine-grained reactivity.</p>
+    <p>
+      Edit <code>src/pages/HomePage.hf</code> and save the file — changes will appear automatically.
+    </p>
+    <h2>Quick start</h2>
+    <p>
+      A component is a class with <code>@View</code> (<code>HomePage.ts</code>), its markup lives in the
+      <code>.hf</code> template next to it. Open the Counter page to see reactivity in action and toggle the theme in
+      the top-right corner.
+    </p>
+  </div>
+}

package/template/src/pages/HomePage.ts

@@ -0,0 +1,5 @@
+import { View } from "@helfy/helfy";
+import template from "./HomePage.hf";
+
+@View({ template })
+export class HomePage {}

package/template/src/pages/_router.hf

@@ -0,0 +1,21 @@
+import type { AppRouter } from "./_router";
+import { RouterView } from "@helfy/helfy";
+import { NotFound } from "@widgets/NotFound/NotFound";
+
+@template<AppRouter>() {
+  @safe {
+    <RouterView>
+      @slot.notFound({ pathname }) {
+        <NotFound pathname={pathname} />
+      }
+    </RouterView>
+  } @wait {
+    <p class="page">Loading…</p>
+  } @fail (error, retry) {
+    <section class="page" role="alert">
+      <h2>Something went wrong</h2>
+      <p>{error instanceof Error ? error.message : String(error)}</p>
+      <button type="button" class="btn" onclick={retry}>Try again</button>
+    </section>
+  }
+}

package/template/src/pages/_router.ts

@@ -0,0 +1,5 @@
+import { View } from "@helfy/helfy";
+import template from "./_router.hf";
+
+@View({ template })
+export class AppRouter {}

package/template/src/pages/{_routes.tsx → _routes.ts}

@@ -1,10 +1,10 @@
-import type { RouteConfig } from "@helfy/helfy";
-import { HomePage } from "./HomePage";
-import { CounterPage } from "./CounterPage";
-import { AboutPage } from "./AboutPage";
-
-export const routes: RouteConfig[] = [
-  { path: "/", component: HomePage },
-  { path: "/counter", component: CounterPage },
-  { path: "/about", component: AboutPage },
-];
+import { lazy, type RouteConfig } from "@helfy/helfy";
+import { HomePage } from "./HomePage";
+import { CounterPage } from "./CounterPage";
+
+export const routes: RouteConfig[] = [
+  { path: "/", component: HomePage },
+  { path: "/counter", component: CounterPage },
+  // A separate chunk, loaded on the first visit.
+  { path: "/about", component: lazy(() => import("./AboutPage").then((m) => m.AboutPage)) },
+];

package/template/src/pages/layouts/MainLayout.hf

@@ -0,0 +1,24 @@
+import type { MainLayout } from "./MainLayout";
+
+@template<MainLayout>() {
+  <div class="layout">
+    <header class="header">
+      @slot:header()
+    </header>
+    <div class="layout__body">
+      <aside class="sidebar">
+        @slot:sidebar()
+      </aside>
+      <main class="main">
+        <div class="main__content">
+          @slot:content()
+        </div>
+      </main>
+    </div>
+    <footer class="footer">
+      @slot:footer() fallback {
+        <span>© 2026</span>
+      }
+    </footer>
+  </div>
+}

package/template/src/pages/layouts/MainLayout.ts

@@ -0,0 +1,5 @@
+import { View } from "@helfy/helfy";
+import template from "./MainLayout.hf";
+
+@View({ template })
+export class MainLayout {}

package/template/src/widgets/Footer/Footer.hf

@@ -0,0 +1,5 @@
+import type { Footer } from "./Footer";
+
+@template<Footer>() {
+  <span>Powered by Helfy — © 2026</span>
+}

package/template/src/widgets/Footer/Footer.ts

@@ -0,0 +1,5 @@
+import { View } from "@helfy/helfy";
+import template from "./Footer.hf";
+
+@View({ template })
+export class Footer {}

package/template/src/widgets/Header/Header.hf

@@ -0,0 +1,15 @@
+import type { Header } from "./Header";
+import { Link } from "@helfy/helfy";
+import { ThemeToggle } from "@widgets/ThemeToggle/ThemeToggle";
+
+@template<Header>() {
+  <div class="header__inner">
+    <Link to="/" label="Helfy" class="header__logo" />
+    <nav class="nav">
+      @for (link of this.links; track link.to) {
+        <Link to={link.to} label={link.label} class={this.pathname === link.to ? "nav-link--active" : ""} />
+      }
+    </nav>
+    <ThemeToggle />
+  </div>
+}

package/template/src/widgets/Header/Header.ts

@@ -0,0 +1,11 @@
+import { View, path } from "@helfy/helfy";
+import { NAV_LINKS } from "@widgets/navLinks";
+import template from "./Header.hf";
+
+@View({ template })
+export class Header {
+  @path()
+  pathname?: string;
+
+  links = NAV_LINKS;
+}

package/template/src/widgets/Navbar/Navbar.hf

@@ -0,0 +1,14 @@
+import type { NavBar } from "./Navbar";
+import { Link } from "@helfy/helfy";
+
+@template<NavBar>() {
+  <nav class="sidebar-nav">
+    @for (link of this.links; track link.to) {
+      <Link
+        to={link.to}
+        label={link.label}
+        class={this.pathname === link.to ? "nav-link nav-link--active" : "nav-link"}
+      />
+    }
+  </nav>
+}

package/template/src/widgets/Navbar/Navbar.ts

@@ -0,0 +1,11 @@
+import { View, path } from "@helfy/helfy";
+import { NAV_LINKS } from "@widgets/navLinks";
+import template from "./Navbar.hf";
+
+@View({ template })
+export class NavBar {
+  @path()
+  pathname?: string;
+
+  links = NAV_LINKS;
+}

package/template/src/widgets/NotFound/NotFound.hf

@@ -0,0 +1,14 @@
+import type { NotFound } from "./NotFound";
+import { Link } from "@helfy/helfy";
+
+@template<NotFound>() {
+  <section class="not-found">
+    <div class="not-found__code">404</div>
+    <h1 class="not-found__title">Oops! Page not found</h1>
+    <p class="not-found__text">The requested address does not exist or has been moved.</p>
+    @if (this.props.pathname) {
+      <p class="not-found__path">{this.props.pathname}</p>
+    }
+    <Link to="/" label="Back to home" class="btn btn--primary" />
+  </section>
+}

package/template/src/widgets/NotFound/NotFound.ts

@@ -0,0 +1,12 @@
+import { View } from "@helfy/helfy";
+import template from "./NotFound.hf";
+
+export interface Props {
+  pathname?: string;
+}
+
+/** Custom 404 page — overrides the RouterView fallback. */
+@View({ template })
+export class NotFound {
+  constructor(readonly props: Props = {}) {}
+}

package/template/src/widgets/ThemeToggle/ThemeToggle.hf

@@ -0,0 +1,16 @@
+import type { ThemeToggle } from "./ThemeToggle";
+
+@template<ThemeToggle>() {
+  <button
+    type="button"
+    class="theme-toggle"
+    onclick={() => this.toggle()}
+    aria-label={this.mode === "dark" ? "Switch to light theme" : "Switch to dark theme"}
+  >
+    @if (this.mode === "dark") {
+      <span>Light</span>
+    } @else {
+      <span>Dark</span>
+    }
+  </button>
+}

package/template/src/widgets/ThemeToggle/ThemeToggle.ts

@@ -0,0 +1,12 @@
+import { View, useCtx } from "@helfy/helfy";
+import { ThemeContext } from "@context/ThemeContext";
+import template from "./ThemeToggle.hf";
+
+@View({ template })
+export class ThemeToggle {
+  @useCtx(ThemeContext, "toggle")
+  toggle!: ThemeContext["toggle"];
+
+  @useCtx(ThemeContext, "mode")
+  mode!: ThemeContext["mode"];
+}

package/template/src/widgets/navLinks.ts

@@ -0,0 +1,5 @@
+export const NAV_LINKS = [
+  { to: "/", label: "Home" },
+  { to: "/counter", label: "Counter" },
+  { to: "/about", label: "About" },
+];

package/template/tsconfig.json

@@ -7,10 +7,8 @@
     "noEmit": true,
     "resolveJsonModule": true,
     "skipLibCheck": true,
-    "jsx": "preserve",
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
-    "plugins": [{ "name": "@helfy/helfy-ts-plugin" }],
     "paths": {
       "@context/*": ["./context/*"],
       "@pages/*": ["./pages/*"],

package/template/src/App.tsx

@@ -1,26 +0,0 @@
-import { View } from "@helfy/helfy";
-import { ThemeContext, ThemeSync } from "@context/ThemeContext";
-import { MainLayout } from "@pages/layouts/MainLayout";
-import { Header } from "@widgets/Header/Header";
-import { NavBar } from "@widgets/Navbar/Navbar";
-import { Footer } from "@widgets/Footer/Footer";
-import { AppRouter } from "@pages/_router";
-
-@View
-export class App {
-  render() {
-    return (
-      <ThemeContext>
-        <ThemeSync />
-        <div class="app">
-          <MainLayout>
-            @slot.header() {<Header />}
-            @slot.sidebar() {<NavBar />}
-            @slot.content() {<AppRouter />}
-            @slot.footer() {<Footer />}
-          </MainLayout>
-        </div>
-      </ThemeContext>
-    );
-  }
-}

package/template/src/context/ThemeContext.tsx

@@ -1,60 +0,0 @@
-import { View, Context, state, useCtx, computed, effect } from "@helfy/helfy";
-
-export type TThemeMode = "light" | "dark";
-
-@Context
-export class ThemeContext {
-  @state mode: TThemeMode = "dark";
-
-  @state toggle = () => {
-    this.mode = this.mode === "dark" ? "light" : "dark";
-  };
-
-  @effect
-  syncToDom() {
-    document.documentElement.classList.toggle("dark", this.mode === "dark");
-  }
-}
-
-@View
-export class ThemeSync {
-  @useCtx(ThemeContext)
-  private theme!: ThemeContext;
-
-  onMount() {
-    document.documentElement.classList.toggle("dark", this.theme.mode === "dark");
-  }
-
-  render() {
-    document.documentElement.classList.toggle("dark", this.theme.mode === "dark");
-    return <span class="hidden" aria-hidden="true"></span>;
-  }
-}
-
-@View
-export class ThemeToggle {
-  @useCtx(ThemeContext, "toggle")
-  private toggle!: ThemeContext["toggle"];
-
-  @useCtx(ThemeContext, "mode")
-  private mode!: ThemeContext["mode"];
-
-  render() {
-    const isDark = this.mode === "dark";
-    return (
-      <button
-        type="button"
-        class="theme-toggle"
-        onclick={this.toggle}
-        title={isDark ? "Light theme" : "Dark theme"}
-        aria-label={isDark ? "Switch to light theme" : "Switch to dark theme"}
-      >
-        {isDark ? (
-          <span>Светлая</span>
-        ) : (
-          <span>Тёмная</span>
-        )}
-      </button>
-    );
-  }
-}

package/template/src/pages/AboutPage.tsx

@@ -1,18 +0,0 @@
-import { View } from "@helfy/helfy";
-
-@View
-export class AboutPage {
-  render() {
-    return (
-      <div class="page">
-        <h1>About</h1>
-        <p>
-          This is a Helfy application with routing, slots, and theme context.
-        </p>
-        <p>
-          Helfy is a declarative framework with decorators, reactive state, and built-in TypeScript support.
-        </p>
-      </div>
-    );
-  }
-}

package/template/src/pages/CounterPage.tsx

@@ -1,17 +0,0 @@
-import { View, state } from "@helfy/helfy";
-
-@View
-export class CounterPage {
-  @state private count = 0;
-
-  render() {
-    return (
-      <div class="page">
-        <h1>Counter</h1>
-        <p>Count: <strong>{this.count}</strong></p>
-        <button class="btn" onclick={() => this.count++}>Increment</button>
-        <button class="btn" onclick={() => this.count--}>Decrement</button>
-      </div>
-    );
-  }
-}

package/template/src/pages/HomePage.tsx

@@ -1,22 +0,0 @@
-import { View } from "@helfy/helfy";
-
-@View
-export class HomePage {
-  render() {
-    return (
-      <div class="page">
-        <h1>Welcome to Helfy</h1>
-        <p>
-          Welcome to Helfy — a modern TypeScript framework for web applications.
-        </p>
-        <p>
-          Edit <code>src/App.tsx</code> and save the file — changes will appear automatically.
-        </p>
-        <h2>Quick Start</h2>
-        <p>
-          Use the sidebar for navigation. Try the Counter page to see reactivity in action and toggle the theme in the top-right corner.
-        </p>
-      </div>
-    );
-  }
-}

package/template/src/pages/_router.tsx

@@ -1,15 +0,0 @@
-import { RouterView, View } from "@helfy/helfy";
-import { NotFound } from "@widgets/NotFound/NotFound";
-
-@View
-export class AppRouter {
-  render() {
-    return (
-      <RouterView>
-        @slot.notFound({ pathname }) {
-          <NotFound pathname={pathname} />
-        }
-      </RouterView>
-    );
-  }
-}