Purple haze is a TypeScript, Markdown, JS generative bundler that works in headless browser

Overview

Purple haze

NPM Version

Inspired by generative programming and weed :). So I was learning Elm language at home usually in the evening and now I am missing all this generative stuff from Elm libs in TS.

Documentation

Documentation for this project is hosted on Github Pages

Bullet points

  • You can use URL imports
  • You will get typings for URL imports
  • SSG phase runs inside browser
  • transpiles with esbuild
  • you can use window and other browser internals during SSG phase

What is generated?

  • when you type URL of an esmodule typings are fetched in the background and typings generated locally for intellisense
  • when you add Markdown files with gray matter it will generate typings for those
  • when you add a Page it will generate Route types so you won't make a mistake later when routing to another page
  • when you add GraphQL backends it will generate Zeus libraries for it making communication with GraphQL backend type safe
  • when you modify config you can access type safe values from it during build ssg process
  • when you add env variables you can access the record with all of them

Roadmap

  • Add esbuild
  • Add TS support
  • Add intelligent .d.ts autocompletion for imported es modules
  • Add image supports
  • Generate tsconfig
  • Relative imports
  • Allow head modification
  • Pass env to browser
  • Provide a way to inject config
  • TSConfig generation for included declarations to work
  • Make zeus configurable and importable file
  • Clear error handling with line numbers
  • split utility functions css,html,md from zeus
  • allow to auto-zeus multiple schemas
  • Types from url streaming
  • JSX, TSX support
  • Provide verbose info levels
  • Create docs and landing page deployable to pages
  • Resolve imports with no extension
  • catch esbuild transform errors
  • support files exporting multiple static pages
  • Add possibility to override html tag
  • Create static gray matter typings for .md files
  • Generate Routes typings for existing export default files
  • catch all errors including no network error
  • generate TS Files from Markdown
  • css support
  • fetch accurate typings withe relative packages typings
  • create CI process description
You might also like...

A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design

A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design

react-admin A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Materi

Dec 30, 2022

Cross-browser QRCode generator for javascript

QRCode.js QRCode.js is javascript library for making QRCode. QRCode.js supports Cross-browser with HTML5 Canvas and table tag in DOM. QRCode.js has no

Dec 28, 2022

A fast-searching and space-saving browser specially designed for programmers.

A fast-searching and space-saving browser specially designed for programmers.

Programmer Browser A fast-searching and space-saving browser specially designed for programmers. ⭐ Support Us If you like our project, do not forget t

Jan 1, 2023

WPPConnect/mobile is an open source project with the objective of automating whatsapp web using the android or ios mobile browser and being able to perform all the functions of our wa-js project

WPPConnect/mobile is an open source project with the objective of automating whatsapp web using the android or ios mobile browser and being able to perform all the functions of our wa-js project, so it is possible to create a customer service, media sending, intelligence recognition based on artificial phrases and many other things, use your imagination to change and modify this project or collaborate on improvements...

Dec 28, 2022

A complete set up of the React application with Typescript, Webpack 5, Babel v7, SSR, Code Splitting and HMR.

Getting Started with react-final-boilerplate Clone the code npm install You are good to go with React Application. Open http://localhost:3000/ and you

Dec 22, 2022

trying to clone tiktok using next, typescript, tailwindcss and hasura graphql. For educational purposes only

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Jan 4, 2022

Makeup shopping app using Next.js and TypeScript

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Nov 21, 2021

NodeRPG - Turn-based RPG written in TypeScript along with Ink and React

NodeRPG - Turn-based RPG written in TypeScript along with Ink and React

NodeRPG Role-Playing Game inside the terminal with Ink and React! Running in your machine Requirements NodeJS TypeScript Yarn* Everything can be done

Jul 31, 2022

Boilerplate de projeto nextjs, com Styled Components e Typescript

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Mar 23, 2022
Comments
  • Resolve imports with no extension

    Resolve imports with no extension

    The best way is to do it during transformation. So all the imports to paths without extension should be resolved to a js file import for example:

    • ./hello can resolve to ./hello.js or ./hello/index.js
    opened by aexol 0
  • Add possibility to override HtmlSkeleton

    Add possibility to override HtmlSkeleton

    Right now it lives in src/transform/htmlSkeleton.ts. Maybe it should be generated from this file and user should be allowed to provide own skeleton for:

    • the whole project
    • individual page
    opened by aexol 0
Owner
Aexol
Changing the world through software 🌍
Aexol
Webpack is an open-source JavaScript module bundler. This includes basic setup files to help me not redo all the setups for webpack when starting a new project.

Webpack Setup Webpack is an open-source JavaScript module bundler. It is made primarily for JavaScript, but it can transform front-end assets such as

Nemwel Boniface 14 Jun 23, 2022
A headless React component that lets you control how visible and overflown items are rendered πŸ‘€

react-overflow-list A hooks based implementation of the OverflowList component from Blueprint JS. Installation yarn add react-overflow-list Basic Usa

Matt Rothenberg 9 May 31, 2022
JavaScript data grid with a spreadsheet look & feel. Works for React, Angular, and Vue. Supported by the Handsontable team ⚑

Handsontable is a JavaScript component that combines data grid features with spreadsheet-like UX. It provides data binding, data validation, filtering

Handsontable 17.4k Jan 1, 2023
Space Traveller hub is a web application that works with the real live data from the SpaceX API

Space Traveller hub is a web application that works with the real live data from the SpaceX API. It's a web application for a company that provides commercial and scientific space travel services.

Roland MWEZE 3 Feb 8, 2022
πŸ–±or ⌨️? πŸ€·β€β™€οΈ, but hopefully use-hover-state works on the "user intent" not the "device"

useHoverState() The one aware of keyboard navigation as well ?? npm i use-hover-state A React hook for tracking user interaction with the DOM elements

Marina 10 Aug 11, 2022
Includes Redux-Saga. Works with movie test API

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Daniyl 4 Oct 16, 2022
Markdown component for React

react-markdown Markdown component for React using remark. Learn markdown here and check out the demo here. Install npm: npm install react-markdown Why

remark 9.7k Jan 4, 2023
A markdown-it plugin and Nunjucks async filter to make working with Cloudinary in Eleventy easier.

Cloudinary Eleventy Helpers This is a collection of Eleventy Cloudinary helpers. It currently includes: A markdown-it plugin that converts local image

Jason Lengstorf 9 Feb 2, 2022
Next-gen, highly customizable content editor for the browser - based on React and Redux and written in TypeScript. WYSIWYG on steroids.

ReactPage ReactPage is a smart, extensible and modern editor ("WYSIWYG") for the web written in React. If you are fed up with the limitations of conte

null 9.1k Jan 6, 2023
Companion React+TypeScript code for my Intro to TypeScript EmergentWorks workshop, bootstrapped with yarn + create-react-app! ✨

Getting Started with Create React App This project was bootstrapped with Create React App. Companion repository to https://github.com/JoshuaKGoldberg/

Josh Goldberg 2 Dec 21, 2022