ndugger

import 'package:flutter/services.dart';
import 'package:flutter/widgets.dart';

class App extends StatefulWidget {
  final Widget root;

  const App({
    super.key,
    required this.root
  });

ndugger

import 'package:flutter/widgets.dart';

import '../utilities/navigation.dart';

typedef PathMiddleware = Future<bool> Function(BuildContext);

class Path {
  final String name;
  final WidgetBuilder builder;
  final List<PathMiddleware> middleware;

ndugger

import { configureStore } from '@reduxjs/toolkit'
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
import { counterSlice } from './counterSlice'

export const appStore = configureStore({
    reducer: {
        counter: counterSlice.reducer
    }
})

ndugger

webmake

WebMake is an opinionated TypeScript (w/ JSX) -> HTML compiler. It works by allowing you to embed an HTML document in your TypeScript modules. This signals to the compiler to invert your code by placing the encompassing TypeScript source code in a <script type="module"> tag within the embedded document.

Ok, but why?

There are a few key proposals that I've got my eyes on:

• HTML Modules

ndugger

import { $, Component } from 'yuzu/dom'
import { nanoid } from 'nanoid'

import { Icon } from './Icon'
import { Task } from './Task'

/**
 * Example task application
 */
export class App extends Component {

ndugger

import { Document } from './Document'
import { Node } from './Node'
import { Style } from './Style'

/**
 * Symbol which represents a flag to determine whether a component is connected
 */
const connected = Symbol('connected')

 /**

ndugger

import {
    Application,
    Fetch,
    Route,
    Router,
    Theme,
    Viewport,
    createElement, 
    createStyleSheet
} from 'yuzu'

ndugger

import { Fetch, Program, Route, Router, Viewport } from 'yuzu'
import { createElement, provideContext } from 'yuzu/tools'

import { Content } from '~/services/Content'

import { Flexbox } from './components/Flexbox'
import { AboutPage } from './pages/AboutPage'
import { ArticlePage } from './pages/ArticlePage'
import { AuthorPage } from './pages/AuthorPage'
import { ContactPage } from './pages/ContactPage'

ndugger

import { Component, Fragment, createElement } from 'cortex'
import { useRoute } from 'cortex-router'

import { useArticles } from '~/hooks/useArticles'
import { useAuthor } from '~/hooks/useAuthor'

import { Avatar } from '~/views/components/Avatar'
import { Card } from '~/views/components/Card'
import { Container } from '~/views/components/Container'
import { Flexbox } from '~/views/components/Flexbox'

ndugger

import { Component, createElement } from 'cortex'
import { createStyleSheet, selector } from 'cortex-css'
import { DateTime } from 'luxon'

import { Theme } from '~/contexts/Theme'

import { Button } from './Button'
import { Container } from './Container'
import { Divider } from './Divider'
import { Flexbox } from './Flexbox'