francescozaniol / xsalt

Kinda like Vue, but written in XSLT

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

xsalt

Kinda like Vue, but written in XSLT

About

With Xsalt, you can define Vue-like components to transform XML/XHTML/RSS into HTML.

Xsalt doesn't require complex tooling like Webpack or Vite; a simple PHP script is sufficient for rendering/building web pages. XSLT is also natively understood by browsers, allowing components to be transformed on the fly without the need for build tools.

I use Xsalt for creating static minisites.

Example

index.xhtml:

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="./includes.xsl" ?>
<html>
  <head />
  <body>
    <hello-world />
  </body>
</html>

includes.xsl:

<xsl:transform xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

  <xsl:include href="./../../src/xsalt.xsl"/>
  <xsl:include href="./components/hello-world.html"/>

</xsl:transform>

hello-world.html:

<xsl:transform xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="hello-world" mode="x-component">

  <template>
    <h1 class="title">Hello world</h1>
  </template>

  <style>
    .title {
      color: blue;
    }
  </style>

</xsl:template>
</xsl:transform>

result:

<!DOCTYPE html>
<html>
  <head>
    <style>.title { color: blue; }</style>
  </head>
  <body>
    <h1 class="title">Hello world</h1>
  </body>
</html>

See live XSLT demo or static build demo

Features & Docs

Installation

git submodule add https://github.com/francescozaniol/xsalt

To update to latest version:

git submodule update --remote --reference https://github.com/francescozaniol/xsalt

Or simply download /src/xsalt.xsl

About

Kinda like Vue, but written in XSLT

License:MIT License


Languages

Language:XSLT 95.0%Language:PHP 5.0%