Releases: abelljs/abell
create-abell@0.0.20: Add bun installer and template to create-abell 🌭
What's Changed
- feat(create-abell): add
bunsupport in create-abell command by @0scvr in #171 - feat(create-abell): add bun template, and option to skip dep installation by @saurabhdaware in #172
You can now use following command to use bun as package installer and template
npx create-abell@latest --template bun-default --installer bunAdditionally, you can also skip dependency installation now with --installer skip or by selecting skip install in prompt of CLI.
New Contributors
Contributors
Assets 2
1.0.0-beta.4: `--open` flag to open dev-server in browser
What's Changed
- feat(abell): add option to open browser on start by @saurabhdaware in #167
abell dev --open # opens localhost in browser - fix(abell): fs.exists build error in windows by @saurabhdaware in #167
Full Changelog: v1.0.0-beta.3...abell-v1.0.0-beta.4
Contributors
Assets 2
Introducing Abell One Beta 🚀: Low-Level, Framework Agnostic, Vite Powered Static-Site-Generator
Check out Abell v1-beta release post at abelljs.org/posts/one
and abelljs.org for all new Abell v1 documentation 🎉
Note: Old docs are moved to v0.abelljs.org
abell-v1.0.0-alpha.72: Abell is now ESM-only package
What's Changed
-
chore: fix minor README quirks by @yashguptaz in #142
-
feat: make abell esm-only by @saurabhdaware in #143
Abell is now esm-only which means the vite plugins that you build, can be esm-only as well. Projects already using abell v1 alpha versions will have to addtype: "module"to their package.json. -
fix: ignore nested abell blocks by @saurabhdaware in 6ce17fa
In earlier versions, if you had nested blocks, it used to throw error and you had to explictly escape the blocks using\{{}}syntax.
From this version, the nested blocks will be ignored by default. Which means if you have the following code, it will just work now.<body> {{ '{{ 2 + 1 }}' }} </body>
This now outputs, the string as it is instead of trying to evaluate it.
<body>{{ 2 + 1 }}</body>
-
feat: Only Inject Hash in Scoped CSS components by @saurabhdaware in 1aae1a2
The components without scoped CSS will not have abell hash. This will improve the build-times a bit.
New Contributors
- @yashguptaz made their first contribution in #142
Full Changelog: abell-v1.0.0-alpha.67...abell-v1.0.0-alpha.72
Contributors
Assets 2
abell-v1.0.0-alpha.67: Explicit Declaration Block and some Bug Fixes
What's Changed
-
Explicit Declarations
You can now explicitly declare first block as declaration block without having{{ // declarations const a = 3; }} <html> <body>{{ a }}</body> </html>importin it. Earlier the first block was considered declaration only if it hadimportmentions. - fix: abell's default routing file resolution logic
- Add documentation to NPM
NPM has the README file now- https://www.npmjs.com/package/abell/v/1.0.0-alpha.67 - New command
abell clear-cacheis added to clear cache
Currently cache is versioned so haven't seen a usecase but few edge cases might come up in future - Output File Path Pattern is configurable now (Untested Feature)
More details on this in future releases. Some internal changes were made for upcoming feature release
Full Changelog: abell-v1.0.0-alpha.61...abell-v1.0.0-alpha.67
`one` is the default branch now 🥳, Upgrade from Vite 2 to Vite 3
What's Changed
- feat: upgrade to vite 3 by @saurabhdaware in #139
- ~ 12% improvements in larger builds with Vite 3 (Tweet from Patak (Vite's maintainer))
- Some code changes that unblocks abell from some errors while rendering on edge (Not saying you can use Abell to render on edge now, but maybe in future versions 👀)
oneis now the default branch for this repository
This does not mean the code inonebranch is stable. Theonehas been primary working branch for me since last few months so it made sense to make it the default. Themainbranch won't have any major changes until the v1 is merged into it.
Readme ✨ Aesthetic ✨ Improvements
The readme also supports light mode now 🎉
Full Changelog: abell-v1.0.0-alpha.56...abell-v1.0.0-alpha.61
Contributors
Assets 2
abell v1.0.0-alpha.56: Vite Upgrade, Cleaner Generate Logs, Local DX Improvements
Vite Upgrade
This version upgrades from vite 2.7.13 to vite 2.9.7 and thus comes with all the changes and features related to that. Check out Vite's Changelog
Cleaner Generate Logs
Removed the server generate logs from the terminal since they are irrelevant while building static site
Local DX Improvements
abell
- Abell now has a local dev-server while working on projects! Inside
packages/abellyou can runyarn devto start an auto-reload server that builds abell on every change. - You can use the local builds in
packages/playground/basicnow!
create-abell
- Inside
package/create-abellyou can runyarn scaffoldthat scaffolds a temporary project inscaffold-dirlocally. Scaffold is replaced after every command.
Will be writing better CONTRIBUTING.md with these changes once Abell v1 is ready for external contributions
[create-abell] [v0.0.15]: Package Name Change, New Template, and Tiny Improvements
Major Change
create-abell-app will be create-abell after abell v1 release.
This allows users to use following commands now-
# Using yarn
yarn create abell
# Using pnpm
pnpm create abell
# Using npm
npm create abell
npm init abell
npx create-abell # this will be documented in docsMinor Change
New Default Template! create-abell has v1 template as a default template. It will look something like this-
The new template covers topics like-
- How to add css
- How to add client-side JS
- How to write components
- Routing
There will be more minimal templates in future
Patch Change
Improvements in logs. Every major step will now be described in the logs of create-abell
✔ Enter Name of your project … test
✔ Select Installer › yarn
>> Scaffolding `test` using `default` template
>> Running `yarn`
✓ test scaffolded successfully
>> cd test and run `yarn dev` to run the dev-serverv1.0.0-alpha.50 - The Return of the Scoped CSS
Scoped CSS is Back 🎉
In your components, now you can write css like -
// navbar.abell
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
<style>
ul {
background-color: #ddd;
}
</style> And it will be scoped for this particular component by default. The ul tags outside of the navbar component will not get these styles.
This is an experimental version of scoped CSS and this one will directly inline the CSS into HTML. In future versions, the bundling of CSS files will improve.
You can also opt out of this by adding scoped="false" to style tag <style scoped="false">.
Thoughts Behind the Decision
So I've been trying to keep abell minimal and close to HTML, CSS, JS setup. I've been treating CSS scoping as an enhancement which can be done using third-party libraries. However, while rebuilding the https://blog.saurabhdaware.in in new Abell I realized, CSS is really messy to write in vanilla setup and thus in Abell.
How we write CSS plays a major role in the DX of the frontend development. There are a few third-party solutions like https://stitches.dev/ that can be used with Abell however it might take some time for them to get some traction in the ecosystem and the setup with Abell is not super straightforward. There isn't any obvious framework-agnostic CSS solution in the ecosystem right now.
Thus it felt necessary to have out-of-the-box CSS scoping in Abell which improves the overall DX of writing and scaling CSS. People will still have an option of ignoring this feature and using third-party without a problem.
We might also get a native CSS scoping solution in CSS (Draft Proposal for CSS Scoping) which I can later leverage in future versions.
Will be improving over this implementation in future updates :D
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 🥳