https://github.com/tina4stack/tina4-js
Tina4 Library for Javascript
https://github.com/tina4stack/tina4-js
Last synced: about 1 year ago
JSON representation
Tina4 Library for Javascript
- Host: GitHub
- URL: https://github.com/tina4stack/tina4-js
- Owner: tina4stack
- Created: 2022-03-18T07:32:07.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2023-06-15T20:36:08.000Z (almost 3 years ago)
- Last Synced: 2025-02-04T18:50:49.243Z (over 1 year ago)
- Language: TypeScript
- Size: 368 KB
- Stars: 1
- Watchers: 1
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Tina4js - This is not another Framework for Javascript #
Begin your Tina4 journey by following these steps
#### Install Parcel
Parcel is a great tool to use whilst developing your project, not only does it allow you to use type script but it will bundle your project into a dist folder automatically.
```
npm install --save-dev parcel
```
#### Installing Tina4js
We've tried to make installing Tina4js as easy as possible, this should result in a working project.
```
npm install tina4js
npm install -g tina4js
tina4 install
```
#### Running your project
```
npm run start
```
#### Examples of routes
```ts
import {Get} from "tina4js/tina4/Get";
import {Tina4} from "tina4js/tina4/Tina4";
(new Get()).add('/test/hello', function (response, request) {
let content = `
Hello World Again!
`;
return response(content, 200, 'text/html')
});
(new Get()).add('/test', function (response, request) {
Tina4.renderTemplate(`
Hello {{name}}!
Send`, {
name: "Tina4",
firstName: "Tina4"
}, function (html) {
return response(html, 200, 'text/html')
}
);
});
(new Get()).add('/test/{id}', function (response, request) {
Tina4.renderTemplate(`
Hello parsing params ok {{id}}!
`, request, function(html) {
return response(html, 200, 'text/html');
});
});
(new Get()).add('/', function (response, request) {
Tina4.renderTemplate(`index.twig`, {test: "Hello World!", title: "Index Page"}, function(html) {
return response (html, 200, 'text/html');
});
});
```
#### Post Routes
This is configured using the tina4-api tag in the index.html file
```ts
import {Post} from "tina4js/tina4/Post";
import {Api} from "tina4js/tina4/Api";
import {Tina4} from "tina4js/tina4/Tina4";
(new Post()).add("/test", function (response, request) {
//Send and API request
console.log('POST WORKING', request);
Api.sendRequest('', request, 'GET', function(result) {
Tina4.renderTemplate(`contact.twig`, result, function(html){
return response(html, 200);
});
});
});
```
### Examples of templates
base.twig
```twig base.twig
{% block content %}
Here is content
{% endblock %}
```
index.twig
```twig index.twig
{% extends "base.twig" %}
{% block content %}
{{ test }}
{% endblock %}
```
contact.twig - tied to the POST route above
```twig contact.twig
API Results
{% for result in results %}
{{result.name.first}}
{% endfor %}
```
#### Running
```
npm start
```
Components
| Component | Example |
|-----------|---------------------------------------------------------------|
| tina4-api | `````` |