kontyra-cli 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.js +72 -0
- package/package.json +24 -0
- package/template/build.js +103 -0
- package/template/public/dist/bundle.js +23630 -0
- package/template/public/dist/client.js +25648 -0
- package/template/public/index.html +12 -0
- package/template/server.js +48 -0
- package/template/src/components/Layout.kon +24 -0
- package/template/src/index.kon +35 -0
- package/template/src/index.kontyra +35 -0
- package/template/src/pages/about.kon +16 -0
- package/template/src/pages/index.kon +23 -0
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Kontyra Framework App</title>
|
|
7
|
+
</head>
|
|
8
|
+
<body style="margin: 0; background-color: #f4f4f9;">
|
|
9
|
+
<div id="root"></div>
|
|
10
|
+
<script src="/dist/bundle.js"></script>
|
|
11
|
+
</body>
|
|
12
|
+
</html>
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
const express = require('express');
|
|
2
|
+
const path = require('path');
|
|
3
|
+
const React = require('react');
|
|
4
|
+
const ReactDOMServer = require('react-dom/server');
|
|
5
|
+
|
|
6
|
+
const app = express();
|
|
7
|
+
const PORT = 3006;
|
|
8
|
+
|
|
9
|
+
app.use(express.static(path.join(__dirname, 'public')));
|
|
10
|
+
|
|
11
|
+
app.get('*', (req, res) => {
|
|
12
|
+
try {
|
|
13
|
+
// 1. Require the compiled Server bundle created by build.js
|
|
14
|
+
// We clear the require cache in development so it reloads on changes
|
|
15
|
+
delete require.cache[require.resolve('./dist/server-app.js')];
|
|
16
|
+
const { AppServer } = require('./dist/server-app.js');
|
|
17
|
+
|
|
18
|
+
// 2. Render the React component to an HTML string based on the URL
|
|
19
|
+
const appHtml = ReactDOMServer.renderToString(
|
|
20
|
+
React.createElement(AppServer, { location: req.url })
|
|
21
|
+
);
|
|
22
|
+
|
|
23
|
+
// 3. Inject it into our HTML shell
|
|
24
|
+
const htmlShell = `
|
|
25
|
+
<!DOCTYPE html>
|
|
26
|
+
<html lang="en">
|
|
27
|
+
<head>
|
|
28
|
+
<meta charset="UTF-8">
|
|
29
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
30
|
+
<title>KOntyra SSR Framework</title>
|
|
31
|
+
</head>
|
|
32
|
+
<body style="margin: 0; background-color: #fdfdfd;">
|
|
33
|
+
<div id="root">${appHtml}</div>
|
|
34
|
+
<script src="/dist/client.js"></script>
|
|
35
|
+
</body>
|
|
36
|
+
</html>
|
|
37
|
+
`;
|
|
38
|
+
|
|
39
|
+
res.send(htmlShell);
|
|
40
|
+
} catch (err) {
|
|
41
|
+
console.error(err);
|
|
42
|
+
res.status(500).send('Internal Server Error: ' + err.message);
|
|
43
|
+
}
|
|
44
|
+
});
|
|
45
|
+
|
|
46
|
+
app.listen(PORT, () => {
|
|
47
|
+
console.log(`KOntyra Framework SSR running at http://localhost:${PORT}`);
|
|
48
|
+
});
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Link } from 'react-router-dom';
|
|
3
|
+
|
|
4
|
+
export default function Layout({ children }) {
|
|
5
|
+
return (
|
|
6
|
+
<div style={{ fontFamily: 'sans-serif', margin: '0 auto', maxWidth: '800px', padding: '20px' }}>
|
|
7
|
+
<header style={{ display: 'flex', alignItems: 'center', borderBottom: '2px solid #eaeaea', paddingBottom: '10px', marginBottom: '20px' }}>
|
|
8
|
+
<div style={{ fontSize: '28px', fontWeight: 'bold', color: '#007bff', marginRight: '30px' }}>
|
|
9
|
+
🚀 Kontyra
|
|
10
|
+
</div>
|
|
11
|
+
<nav>
|
|
12
|
+
<Link to="/" style={{ marginRight: '15px', textDecoration: 'none', color: '#333', fontWeight: 'bold' }}>Home</Link>
|
|
13
|
+
<Link to="/about" style={{ textDecoration: 'none', color: '#333', fontWeight: 'bold' }}>About</Link>
|
|
14
|
+
</nav>
|
|
15
|
+
</header>
|
|
16
|
+
<main>
|
|
17
|
+
{children}
|
|
18
|
+
</main>
|
|
19
|
+
<footer style={{ marginTop: '50px', paddingTop: '20px', borderTop: '1px solid #eaeaea', textAlign: 'center', color: '#888', fontSize: '14px' }}>
|
|
20
|
+
© {new Date().getFullYear()} Powered by Kontyra Framework
|
|
21
|
+
</footer>
|
|
22
|
+
</div>
|
|
23
|
+
);
|
|
24
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
import { createRoot } from 'react-dom/client';
|
|
3
|
+
|
|
4
|
+
function App() {
|
|
5
|
+
const [count, setCount] = useState(0);
|
|
6
|
+
|
|
7
|
+
return (
|
|
8
|
+
<div style={{ fontFamily: 'sans-serif', textAlign: 'center', marginTop: '100px' }}>
|
|
9
|
+
<h1 style={{ color: '#2a2a2a' }}>Welcome to the Kontyra Framework!</h1>
|
|
10
|
+
<p style={{ fontSize: '18px', color: '#555' }}>
|
|
11
|
+
This component is written entirely in a custom <strong>.kon</strong> file.
|
|
12
|
+
</p>
|
|
13
|
+
<div style={{ marginTop: '30px' }}>
|
|
14
|
+
<button
|
|
15
|
+
onClick={() => setCount(c => c + 1)}
|
|
16
|
+
style={{
|
|
17
|
+
padding: '12px 24px',
|
|
18
|
+
fontSize: '16px',
|
|
19
|
+
cursor: 'pointer',
|
|
20
|
+
backgroundColor: '#007bff',
|
|
21
|
+
color: 'white',
|
|
22
|
+
border: 'none',
|
|
23
|
+
borderRadius: '6px',
|
|
24
|
+
boxShadow: '0 4px 6px rgba(0,0,0,0.1)'
|
|
25
|
+
}}
|
|
26
|
+
>
|
|
27
|
+
Clicked {count} times
|
|
28
|
+
</button>
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
const root = createRoot(document.getElementById('root'));
|
|
35
|
+
root.render(<App />);
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
import { createRoot } from 'react-dom/client';
|
|
3
|
+
|
|
4
|
+
function App() {
|
|
5
|
+
const [count, setCount] = useState(0);
|
|
6
|
+
|
|
7
|
+
return (
|
|
8
|
+
<div style={{ fontFamily: 'sans-serif', textAlign: 'center', marginTop: '100px' }}>
|
|
9
|
+
<h1 style={{ color: '#2a2a2a' }}>Welcome to the Kontyra Framework!</h1>
|
|
10
|
+
<p style={{ fontSize: '18px', color: '#555' }}>
|
|
11
|
+
This component is written entirely in a custom <strong>.kontyra</strong> file.
|
|
12
|
+
</p>
|
|
13
|
+
<div style={{ marginTop: '30px' }}>
|
|
14
|
+
<button
|
|
15
|
+
onClick={() => setCount(c => c + 1)}
|
|
16
|
+
style={{
|
|
17
|
+
padding: '12px 24px',
|
|
18
|
+
fontSize: '16px',
|
|
19
|
+
cursor: 'pointer',
|
|
20
|
+
backgroundColor: '#007bff',
|
|
21
|
+
color: 'white',
|
|
22
|
+
border: 'none',
|
|
23
|
+
borderRadius: '6px',
|
|
24
|
+
boxShadow: '0 4px 6px rgba(0,0,0,0.1)'
|
|
25
|
+
}}
|
|
26
|
+
>
|
|
27
|
+
Clicked {count} times
|
|
28
|
+
</button>
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
const root = createRoot(document.getElementById('root'));
|
|
35
|
+
root.render(<App />);
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
export default function About() {
|
|
4
|
+
return (
|
|
5
|
+
<div>
|
|
6
|
+
<h1>About This Framework</h1>
|
|
7
|
+
<p>
|
|
8
|
+
Just like Next.js, any <code>.kon</code> file you place in the <code>src/pages/</code>
|
|
9
|
+
directory automatically becomes a route in your application!
|
|
10
|
+
</p>
|
|
11
|
+
<p>
|
|
12
|
+
The global layout (with the KOntyra logo) is automatically applied to every page.
|
|
13
|
+
</p>
|
|
14
|
+
</div>
|
|
15
|
+
);
|
|
16
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
|
|
3
|
+
export default function Home() {
|
|
4
|
+
const [count, setCount] = useState(0);
|
|
5
|
+
|
|
6
|
+
return (
|
|
7
|
+
<div>
|
|
8
|
+
<h1>Welcome to your new Framework!</h1>
|
|
9
|
+
<p>This page was Server-Side Rendered (SSR) and then hydrated on the client.</p>
|
|
10
|
+
|
|
11
|
+
<div style={{ marginTop: '20px', padding: '20px', backgroundColor: '#f9f9f9', borderRadius: '8px' }}>
|
|
12
|
+
<h3>Interactive Client-Side State</h3>
|
|
13
|
+
<p>Click the button to test hydration:</p>
|
|
14
|
+
<button
|
|
15
|
+
onClick={() => setCount(c => c + 1)}
|
|
16
|
+
style={{ padding: '10px 20px', cursor: 'pointer', backgroundColor: '#007bff', color: 'white', border: 'none', borderRadius: '4px' }}
|
|
17
|
+
>
|
|
18
|
+
Clicked {count} times
|
|
19
|
+
</button>
|
|
20
|
+
</div>
|
|
21
|
+
</div>
|
|
22
|
+
);
|
|
23
|
+
}
|