Ski Engine is a framework agnostic template engine that works with Alpine JS
Mock your next data driven application quickly with components.
For more information, check out Alpine JS Documentation
<x-app>
<x-article>
<h1>Posts :</h1>
<template x-for="post in posts">
<x-post>
</template>
</x-article>
</x-app>Alpine JS is an quite simple and very intuitive Javascript framework inspired by Vue JS which can be used directly in HTML from a CDN.
A, check out Alpine JS Documentation
The best way to start a Ski project is using composer
composer require ski/ski-phpCreate the following project file structure.
Directories structure:
----------------------
<mySkiPath>/
|___ components/
|___ templates/
|___ head.php
In your php that instanciate ski, you need to specifies :
<?php
require 'vendor/autoload.php';
use Core\Ski;That's all folks. Ski Engine is now ready to use !
This file can be your index.php or your router for example.
This is how to render a view
require 'vendor/autoload.php';
Use Core\Ski;
$ski = new Ski(__DIR__."/path/to/mySkiPath");
// Without "/" at end
$datas = [..]; // retrieve datas as JSON, Array or object
$ski->template('templateName'); //add template that you need
$ski->data($datas); //add datas to Alpine to front
$ski->render(); //And just ⚡️ !Define which template will be rendered.
//example :
$ski->template('articleTemplate');
// set template in /templates/articleTemplate.phpPass datas from your backend, DB, Models or whatever to the view.
//example :
$datas = Http::get('/api/v1/users')->getJson();
$ski->data($datas);
//$datas = {"posts":[...]}
//$datas = ['posts' => [...]]
//$datas = $posts[42]->content->...The $datas variable can be a JSON Object, PHP Object or an Array.
Datas are passed to AlpineJS in x-data tag in <body> as Javascript Object datas
<div x-data="datas">
<div v-for="post in datas.posts">
<template>
<h3 x-text="post.username"></h3>
<p x-text="post.body"></p>
</template>
</div>
</div>//example :
$ski->render();The ->render() method will send the view to the browser, this methods must be called in last.
Previous methods can be called in any order.
With Ski Engine, you create templates by using components. Components are little piece of code that you can manipulate in differents way. Components system are processed by PHP and components behavior are defined with AlpineJS directives.
To create new component, create new file in components/ directory.
The filename will be used as component tag name
Let's create a simple comment component :
<!--/components/comment.php-->
<div class="comment-card">
<h3 x-text="post.userName"></h3>
<p x-text="post.content"></p>
</div>Let's create another component article :
<!--/components/article.php-->
<article class="article">
<h2 x-text="datas.article.title"></h2>
<p x-text="datas.article.content"></p>
<div class="comments_Section">
<h3>Comments:</h3>
<x-slot></x-slot>
</div>
</article>To build templates, you just have to assemble your components.
For call components, use the following syntax <x-componentName> represents our component.
<!--/templates/blogPage.php-->
<x-article>
<template x-for="post in datas.posts">
<x-comment/>
<template>
</x-article>The components names can only contains letters, and the word template is reserved and can't be used.
Tags are case insensitive : <x-App> <x-APP> <x-app> make reference to same "app.php" components file.
<template> should be called in templates and not in components itself, is just a tip.
This file populate <head></head> in every rendered HTML document by Ski.
Here add your stylesheets or your favorite CSS frameworks CDN.
<meta charset='utf-8'>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>Be sure Alpine JS CDN is linked
Soon !
Not implemented yet
NAMM : Détailler comment implémenter Ski avec si possible avec Laravel, lumen, leaf, Flight,
Ski-Engine is an Open Source project, every contribution are welcomes. Some points needs attention :
- Improve XSS protection
- Add global variables system
- Add Configuration File
- Better management of head tag
At this early point of developpement, use Ski-Engine in production is clearly not recommanded.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
This project is not affiliate with Alpine JS (Thanks to Caleb Porzio for this really cool works on AlpineJS)