Skip to content

Commit 21a2b63

Browse files
MohsenElgendyMohsenElgendy
committed
feat: add typescript example
1 parent c9e838a commit 21a2b63

File tree

7 files changed

+157
-0
lines changed

7 files changed

+157
-0
lines changed

‎examples/with-typescript/README.md

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
## Typescript Example
2+
3+
This example shows how to enable typescript support within your frontal application.
4+
5+
## Usage
6+
7+
```
8+
$ npm i
9+
$ npm run dev
10+
```

‎examples/with-typescript/assets/css/style.scss

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
-webkit-font-smoothing: antialiased;
5+
}
6+
body {
7+
font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
8+
}
9+
10+
.container {
11+
width: 780px;
12+
margin: 0 auto;
13+
}
14+
15+
.head {
16+
margin-bottom: 10px;
17+
text-align: center;
18+
}
19+
20+
.head h1 {
21+
font-weight: 400;
22+
font-size: 50px;
23+
margin: 20px 0 10px 0;
24+
25+
> a {
26+
text-decoration: none;
27+
color: rgb(2,132,199);
28+
}
29+
30+
> a:hover {
31+
text-decoration: underline;
32+
}
33+
}
34+
35+
.head p {
36+
font-weight: 500;
37+
line-height: 22px;
38+
}
39+
40+
.cards {
41+
display: grid;
42+
gap: 7px;
43+
grid-template-columns: repeat(2, minmax(0,1fr));
44+
margin-top: 30px;
45+
46+
> .card {
47+
border: 1px solid #eaeaea;
48+
border-radius: 5px;
49+
padding: 15px;
50+
color: #333;
51+
font-size: 15px;
52+
font-weight: 500;
53+
}
54+
}
55+
56+
.buttons {
57+
display: flex;
58+
margin-top: 20px;
59+
justify-content: center;
60+
61+
> a {
62+
font-size: 16px;
63+
text-decoration: none;
64+
color: #FFF;
65+
background: #333;
66+
padding: 10px;
67+
border-radius: 5px;
68+
margin-right: 5px;
69+
}
70+
> a.outline {
71+
background: none;
72+
color: #333;
73+
border: 1px solid #333;
74+
}
75+
}

‎examples/with-typescript/assets/js/app.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// @todo write your application code...

‎examples/with-typescript/frontal.config.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
module.exports = {
2+
bundles: {
3+
main: {
4+
assets: [
5+
'@assets/css/style.scss',
6+
'@assets/js/app.ts'
7+
],
8+
pages: ['**/*.html']
9+
}
10+
}
11+
}

‎examples/with-typescript/package.json

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"name": "with-typescript",
3+
"scripts": {
4+
"dev": "frontal dev",
5+
"build": "frontal build",
6+
"serve": "frontal serve"
7+
},
8+
"devDependencies": {
9+
"frontal.js": "latest"
10+
}
11+
}

‎examples/with-typescript/pages/index.html

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>Frontal.JS Application</title>
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="head">
12+
<h1>Welcome to <a href="https://dlex.io/frontal" target="_blank">Frontal.JS</a></h1>
13+
<p>A modern HTML development framework packed with the most critical commonly used features in today's modern workflows.</p>
14+
</div>
15+
<div class="cards">
16+
<div class="card">CSS Languages such as Sass and Less</div>
17+
<div class="card">Next generation JavaScript via Babel</div>
18+
<div class="card">TypeScript Support</div>
19+
<div class="card">HMR & Auto-Reload</div>
20+
<div class="card">Automatic Bundle Injection</div>
21+
<div class="card">Automatic Asset Optimization</div>
22+
</div>
23+
<div class="buttons">
24+
<a href="https://dlex.io/frontal/docs" target="_blank">Read the Docs</a>
25+
<a href="https://github.com/dlexio/frontal.js#contribute" target="_blank" class="outline">Contribute</a>
26+
</div>
27+
</div>
28+
</body>
29+
</html>

‎examples/with-typescript/tsconfig.json

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"compilerOptions": {
3+
"baseUrl": ".",
4+
"paths": {
5+
"@assets/*": ["./assets/*"]
6+
},
7+
"target": "ES5",
8+
"module": "CommonJS",
9+
"lib": ["ES5", "ScriptHost", "dom"],
10+
"moduleResolution": "Node",
11+
"esModuleInterop": true,
12+
"skipLibCheck": true,
13+
"skipDefaultLibCheck": true,
14+
"strict": true,
15+
"outDir": ".frontal",
16+
"forceConsistentCasingInFileNames": true
17+
},
18+
"include": ["./assets"],
19+
"exclude": ["node_modules"]
20+
}

0 commit comments

Comments
 (0)