Releases: abelljs/abell
v1.0.0-alpha.47 - Use JSX, TS, and everything that esbuild supports in Abell Blocks 🚀
Allow esbuild configs to be passed
Now you can do strange things like -
{{
import React from 'react';
import ReactDOMServer from 'react-dom/server';
}}
<html>
<body>
<div id="app">
{{ ReactDOMServer.renderToString(<div className="jsx-div">{'I am JSX'}</div>) }}
</div>
</body>By passing this in your vite.config.ts
import { defineConfig } from "abell";
export default defineConfig({
abell: {
// this esbuild runs on abell codeblocks and supports all the esbuild configs here
esbuild: {
loader: 'jsx',
}
}
})This means, now you can write JSX, TSX, TypeScript, and whole lot of things that esbuild supports 🎉
Make working directory as default root
Breaking Change wrt earlier alpha versions
In earlier versions, we had to create src/index.abell file as entry file. However now the entry file is ./index.abell
This takes us closer to the vanilla html, css, js setup. Directory structures can now look like-
- index.abell
- about.abell
- nested-path
- index.abell
which will generate following pages-
/, /about, /nested-path
The initial setup now gets even easier since we can just
- create
index.abellfile - Run
npx abell@next dev
and we get the server working 🥳
v1.0.0-alpha.37 - Custom Routes using `makeRoutes` API
One of the common usecase in a Static-Site-Generator is to use content from sources like Hashnode, Dev.to, Medium or anywhere else.
In most static-site-generators, you need a source plugin to achieve this. So every source requires a different source plugin. Every plugin comes with their own implementation and API and documentation. This can become complicated and the static-site-generators have to wait for the plugin ecosystem to develop in order to be usable.
This is how it was in Abell v0 too where we had to build source plugins for different sources.
Abell v1 comes with a philosophy that things should be intuitive and there should not be magic abstractions. Having source-plugins break this idea.
Introducing an alternate way to provide a source with makeRoutes API in entry.build.ts 🎉
Here's an example of fetching the first article from dev.to and rendering it on /blog/hello-blog path-
// src/entry.build.ts
import fetch from 'isomorphic-unfetch';
import { Route } from 'abell';
import index from './index.abell';
import blog from './blog.abell';
const fetchFirstArticle = async () => {
const articles = await fetch(`https://dev.to/api/articles?username=saurabhdaware`).then(res => res.json());
const blog: Record<string, any> = await fetch(`https://dev.to/api/articles/${articles[0].id}`).then(res => res.json());
const { body_html } = blog;
return body_html;
}
export const makeRoutes = async (): Promise<Route[]> => {
const articleContent = await fetchFirstArticle();
return [
{
path: '/',
render: () => index()
},
{
path: '/blog/hello-blog',
render: () => blog({blogContent: articleContent})
}
]
}<!-- blog.abell -->
<html>
<body>
<nav>blog navbar</nav>
{{ props.blogContent }}
<footer>blog footer</footer>
</body>
</html>This API not only allows you to fetch articles from sources but you can do all sort of things. What you render on a page is completely in your control. Whatever HTML string you pass to render function, becomes the HTML on the page.
Do note that this is an optional API and you can completely skip entry.build.ts and your routes will be based on filepaths.
This removes the need of all sort of abell-specific source plugins! If you feel like you have to write a lot of code, you can always wrap the source APIs in some non-abell-specific NPM package and use it from package.
Breaking change
- The
export function renderfrom earlier releases is dropped in favor ofmakeRoutes
v1.0.0-alpha.20 - No-config setup
Abell projects can now be setup without any configurations. entry.build.js, vite.config.js are all optional now.
To setup Abell from scratch
- create
src/index.abell - That's it 🎉 Run
npx abell devto run dev server andnpx abell generateto build static-site.
To make things more configurable, you can create vite.config.js/ts in root and entry.build.js/ts inside src.
abell v1.0.0-alpha.10: First v1 Prototype, Vite-based SSG
Abell v1.0.0 First Prototype
You can try out the following changes on abell@next
Working Prototype
Currently, it only supports TypeScript and won't work with JavaScript projects. Will add JS support in follow-up releases 🙈
Vite-based SSG
- Abell's rendering logic is now a Vite Plugin. You can use it as-
// vite.config.ts
import { defineConfig } from 'vite'
import { vitePluginAbell } from 'abell';
export default defineConfig({
plugins: [vitePluginAbell()]
})- The dev-server, and bundling will now be handled by vite
- Having Vite enables you to now use
importsyntax inside Abell blocks
{{
import rawText from './something.txt?raw'; // One of the vite features to load raw data from files
import navbar from './navbar.abell'; // This works because of abell's vite plugin
}}
<html>
<body>
{{ navbar }}
hello {{ rawText }}
</body>
</html>- You can use any vite plugins and loaders with abell now. This will mean plugins like vite-plugin-markdown can be used now instead of having any abell-specific solutions.
- Since most of the dev-server and bundling part is now handled by vite, a lot of code from
abellis removed. I have moved code fromabell-renderertoabellandabell-rendererwill be deprecated with the v1. - The assignments, reassignments, and imports will have to happen in the first block now.
Changes in CLI
abell buildis nowabell generate(abell buildwill continue to work as an alias butgeneratewill be documented)abell serveis nowabell dev(In a lot of projects,serveis used for script that serves the build.devis used in dev-servers so made sense to move toabell dev.abell servewill continue to work as alias but won't be documented)
Note: inside this repository, the changes are on branch one
bieeeeeee 🌻
1.0.0-alpha.7 - RIP abell components
Note: These changes are only done in abell-renderer and not in abell. However these will reflect in new major abell version (v1) whenever it releases.
npm install [email protected]
Breaking Changes
- Drops support for abell-component from renderer.
- Added support to read any type of file with require.
Instead of new syntax, you can now require any abell file and render it on the go with abell-renderer itself.
This also allows you to require HTML file and render it directly or require markdown file and render it with your own favorite markdown-to-html convertor.
{{
const { render } = require('abell-renderer');
const MarkdownIt = require('markdown-it');
const md = new MarkdownIt();
const navbar = require('./navbar.abell');
const footer = require('./footer.html');
const aboutMarkdown = require('./about.md');
}}
<html>
<body>
{{ render(navbar) }}
<main>
{{ md.render(aboutMarkdown) }}
</main>
{{ footer }}
</body>
</html>allowRequireoption is nowdangerouslyAllowRequire
If you're usingabell-rendereron server, you have to be cautious while using allowRequire. You have to make sure you're not passing any value from user input. This change was done to warn people while using this option.
abell-renderer v1.0.0-alpha.3: TypeScript, Monorepo Migration
First iteration of abell-renderer v1 🥳
npm install abell-renderer@nextBreaking Changes
- Component Tree structure changed (Will not work with current version of
abell) - Faster Builds ⚡️
{{}}now prints empty string (earlier it used to print brackets)- Cannot use
propsin styles and scripts now (It was bug that it was possible earlier 😅, if a component runs multiple times with different props, the style and script will be altered. Outputing all those versions of styles and scripts is not possible/ideal)
0.10.3 - export serve function
Exports serve function from main.
Now you can do-
const { serve } = require('abell');
serve({
port: 5000
});and this will run the abell's dev server!
0.10.2 - avoid link injection when css/js link has extra dot slash before URL
Fixes #119
Link injection now handles cases like ./bundled-js/main.abell.js, /bundled-js/main.abell.js, bundled-js/main.abell.js
0.10.1 - migrate to parsing scopedSelector on build instead of client-side injection
Bump abell-renderer. Bug fix - abelljs/abell-renderer#44
0.10.0 - Ignore adding link and script import to html if already exist
Avoid adding style or script to parent page if the link already exists.
If user already has the css/js mentioned in index page-
<link rel="preload" href="./bundled-css/main.abell.css" />Abell won't automatically add link to page. This allows user to preload styles or have deferred and async scripts