Skip to content
This repository has been archived by the owner on Mar 25, 2023. It is now read-only.

Releases: Bug-Duck/tntjs

v0.2.4-alpha

14 Aug 04:56
@sheepbox8646 sheepbox8646
v0.2.4-alpha
7f75626
Compare
Choose a tag to compare
v0.2.4-alpha Pre-release
Pre-release

This version we create user API again.
tntjs already has a future direction, which is the development of large-scale multi-page websites, and maintains native and efficient development

How to use?

If I want to make a counter app and judeg the number is odd or even.

//App.js

import { TNTApp } from "https://cdn.jsdelivr.net/npm/tntjs@latest/dist/src/index.js"

const app = new TNTApp()

app.page({
  data: {
    number: 1
  },
  computed: {
    isOddOrEven() {
      if (data.number % 2 === 0) return "Even" 
      else return "Odd"; 
    }
  },
  mount: document.getElementById("app")
}, "comput")

export default app;

every page have a unique page id

<page-id>comput</page-id>

You can use the page() to log on a page app

<!DOCTYPE html>
<!--index.html-->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>tntjs comput demo</title>
  <page-id>comput</page-id>
</head>
<body>
  <div id="app">
    <div>
      <v data="number" style="font-size: 100px"></v><br/>
      <button onclick="data.number += 1">+1</button>
      <button onclick="data.number -= 1">-1</button><br/>
      The number is: <v data="isOddOrEven"></v>
    </div>
  </div>
  <script type="module" src="./App.js"></script>
</body>
</html>
Assets 2
Loading

v0.2.0-alpha

05 Aug 06:49
@sheepbox8646 sheepbox8646
v0.2.0-alpha
3e7436a
Compare
Choose a tag to compare
v0.2.0-alpha Pre-release
Pre-release

Welcome to tntjs v0.2.0 Alpha release.

This version we use vdom and make tntjs be faster!

This version are rewritten version

How to use?

To make a tntjs app, you should:

const app = new TNT.TNTApp()
    .useData({
        x: 114514,
        foo: [],
        bar: 5
    })
    .useComputed({
        sum: function () {
          var sum = 0;
          data.foo.forEach(function (v) { return (sum += v); });
          return sum;
      }
    })
    .useEffect(function () {
        console.log("Sum changed: ".concat(data.sum));
    })
    .onMounted(function (app) {
        console.timeEnd("mount");
        console.log("App mounted!");
    })
    .mount(document.getElementById("root"));
data.foo = [233];

Use TNT.TNTApp to new a tntjs app, and use useData to set variable and use mount to set the app node

What change than tntjs Alpha 0.1?

The rewritten version In the new version, we use virtual dom to increase the speed of tntjs several times. It only takes 200ms to render 10,000 nodes, and the user api is more user-friendly.

Assets 2
Loading

TNT.js v0.1.0 Release

10 Jul 12:22
@samzhangjy samzhangjy
v0.1.0-alpha
5002de8
Compare
Choose a tag to compare
TNT.js v0.1.0 Release Pre-release
Pre-release

Welcome to TNT.js v0.1.0 Alpha release.

This release introduces numbers of breaking changes.

Breaking changes

  • <v> tags now has the ability of evaluating statements. For example:

    <v data="`Link to ${links[0].text}`"></v>

    Is now fully usable.

  • Initializing variables can now be using TNTApp.data().

    In the previous versions of TNT.js, variables can only be created using SymbolTable. Although this brings more space for customization, it made developing TNT.js applications way more complicated.

    So today, we're introducing a wrapper to the TNT core: TNTApp . TNTApp encapsulates the core TNT runtime, SymbolTable and plugins. A basic example of TNTApp is as follows:

    const app = new TNTApp(
  document.getElementById("root"),  // root element for TNT rendering
  () => { console.log(app.variables.x); }  // onload event callback
);
app.data({ x: 233 });  // variable initialization

  • Tag attribute data renderers

    • tnt-td renderer brings a new feature that allows users to use TNT variables inside tags.
    • tnt-sd renderer allows users to use TNT variables inside inline stylesheet.

    More on those in the documentation.

  • For loops template
    <t-for> element is a booming feature introduced in this release. It allows users to loop through and render data defined in arrays. E.g.:

    <t-for data="item in links">
  <li><v data="item">Link loading...</v></li>
</t-for>

    Please refer to the demos for further information.

Minor changes

  • Refactored code to ES6 syntax
  • Usage with ES Modules
  • Removed TNTScript plugin since it's not quite complete
  • Relocation of source code files

Please note that this release is under alpha state, meaning more breaking changes may come in the future and not recommended to use in production.

Thank you for checking out Bugduck TNT.js v0.1.0 Alpha release. If you have any questions or feature requests, feel free to open up a new issue and we'll be happy to check it out!

Assets 2
Loading