Skip to content

Commit 9ac397c

Browse files
vintavinta
committed
add examples
1 parent 8e8ddda commit 9ac397c

File tree

6 files changed

+208
-0
lines changed

6 files changed

+208
-0
lines changed

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,6 @@ playwright-report/
1313
# Environment files
1414
.env
1515
.env.*
16+
17+
# Examples
18+
examples/package-lock.json

‎examples/browser.html‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-TW">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>pangu.js Browser Example</title>
7+
<style>
8+
body {
9+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
10+
max-width: 800px;
11+
margin: 50px auto;
12+
padding: 20px;
13+
line-height: 1.6;
14+
}
15+
.example {
16+
background: #f5f5f5;
17+
padding: 15px;
18+
border-radius: 5px;
19+
margin: 20px 0;
20+
}
21+
button {
22+
background: #007bff;
23+
color: white;
24+
border: none;
25+
padding: 10px 20px;
26+
border-radius: 5px;
27+
cursor: pointer;
28+
margin: 5px;
29+
}
30+
button:hover {
31+
background: #0056b3;
32+
}
33+
#result {
34+
margin-top: 20px;
35+
padding: 15px;
36+
background: #e8f4fd;
37+
border-radius: 5px;
38+
white-space: pre-wrap;
39+
}
40+
</style>
41+
</head>
42+
<body>
43+
<h1>pangu.js Browser Example</h1>
44+
45+
<div style="background: #fff3cd; border: 1px solid #ffeaa7; padding: 15px; margin-bottom: 20px; border-radius: 5px;">
46+
<strong>Note:</strong> To run this example with ES modules support, start the web server:
47+
<pre style="background: #f8f9fa; padding: 10px; margin: 10px 0; border-radius: 3px;">npm run server</pre>
48+
Then open <a href="http://localhost:8080">http://localhost:8080</a> in your browser.
49+
</div>
50+
51+
<div class="example">
52+
<h2>UMD Version (Script Tag)</h2>
53+
<p id="demo1">測試文字：當你凝視著bug，bug也凝視著你</p>
54+
<button onclick="spacingDemo1()">Run</button>
55+
</div>
56+
57+
<div class="example">
58+
<h2>ESM Version (ES Modules)</h2>
59+
<p id="demo2">另一個測試：使用JavaScript開發Web應用程式</p>
60+
<button id="esmButton">Run</button>
61+
</div>
62+
63+
<div class="example">
64+
<h2>Auto-spacing Entire Page</h2>
65+
<p>這段文字包含English和中文mixed在一起，還有numbers123。</p>
66+
<p>pangu.js會自動在CJK字元和half-width characters之間加入空白。</p>
67+
<button onclick="autoSpacingPage()">Run</button>
68+
</div>
69+
70+
<div id="result"></div>
71+
72+
<!-- UMD Version -->
73+
<script src="node_modules/pangu/dist/browser/pangu.umd.js"></script>
74+
<script>
75+
function spacingDemo1() {
76+
const elem = document.getElementById('demo1');
77+
const original = elem.textContent;
78+
pangu.spacingElementById('demo1');
79+
const result = document.getElementById('result');
80+
result.textContent = `UMD Version Result:\nOriginal: ${original}\nProcessed: ${elem.textContent}`;
81+
}
82+
83+
function autoSpacingPage() {
84+
pangu.autoSpacingPage();
85+
document.getElementById('result').textContent = 'Auto-spacing enabled! Try editing the text on the page.';
86+
}
87+
</script>
88+
89+
<!-- ESM Version -->
90+
<script type="module">
91+
import { pangu } from './node_modules/pangu/dist/browser/pangu.js';
92+
93+
document.getElementById('esmButton').addEventListener('click', () => {
94+
const elem = document.getElementById('demo2');
95+
const original = elem.textContent;
96+
const spaced = pangu.spacingText(original);
97+
elem.textContent = spaced;
98+
99+
const result = document.getElementById('result');
100+
result.textContent = `ESM Version Result:\nOriginal: ${original}\nProcessed: ${spaced}`;
101+
});
102+
</script>
103+
</body>
104+
</html>

‎examples/package.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "pangu-examples",
3+
"version": "1.0.0",
4+
"description": "pangu.js Example app",
5+
"scripts": {
6+
"test:commonjs": "node test-commonjs.js",
7+
"test:esm": "node test-esm.mjs",
8+
"test": "npm run test:commonjs && npm run test:esm",
9+
"server": "node server.js"
10+
},
11+
"dependencies": {
12+
"pangu": "6.1.1"
13+
}
14+
}

‎examples/server.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
const http = require('http');
2+
const fs = require('fs');
3+
const path = require('path');
4+
5+
const PORT = 8080;
6+
7+
const server = http.createServer((req, res) => {
8+
let filePath = '.' + req.url;
9+
if (filePath === './') {
10+
filePath = './browser.html';
11+
}
12+
13+
const extname = path.extname(filePath);
14+
const contentType = {
15+
'.html': 'text/html',
16+
'.js': 'text/javascript',
17+
'.mjs': 'text/javascript',
18+
}[extname] || 'text/plain';
19+
20+
fs.readFile(filePath, (error, content) => {
21+
if (error) {
22+
if (error.code === 'ENOENT') {
23+
res.writeHead(404);
24+
res.end('File not found');
25+
} else {
26+
res.writeHead(500);
27+
res.end('Server error: ' + error.code);
28+
}
29+
} else {
30+
res.writeHead(200, { 'Content-Type': contentType });
31+
res.end(content, 'utf-8');
32+
}
33+
});
34+
});
35+
36+
server.listen(PORT, () => {
37+
console.log(`Server running at http://localhost:${PORT}/`);
38+
console.log('Open http://localhost:8080 in your browser to view the example');
39+
});

‎examples/test-commonjs.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
// Test CommonJS imports
2+
const pangu = require('pangu');
3+
const { NodePangu } = require('pangu');
4+
5+
console.log('=== Testing CommonJS Imports ===\n');
6+
7+
// Test default export
8+
console.log('Default require works:', typeof pangu.spacingText === 'function');
9+
console.log('Can access NodePangu:', typeof pangu.NodePangu === 'function');
10+
console.log('NodePangu destructured:', NodePangu !== undefined);
11+
12+
// Test functionality
13+
const text = '測試CommonJS模組';
14+
const spaced = pangu.spacingText(text);
15+
console.log(`\nTest spacing: "${text}" → "${spaced}"`);
16+
17+
// Test instance creation
18+
const customPangu = new NodePangu();
19+
console.log('Custom instance works:', customPangu.spacingText('測試test') === '測試 test');
20+
21+
// Test that pangu is the instance itself
22+
console.log('\nVerifying pangu is an instance:', pangu instanceof NodePangu);
23+
24+
console.log('\nCommonJS imports working correctly!');

‎examples/test-esm.mjs‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
// Test both ESM and CommonJS imports
2+
import pangu from 'pangu';
3+
import { NodePangu } from 'pangu';
4+
5+
console.log('=== Testing ESM Imports ===\n');
6+
7+
// Test default export
8+
console.log('Default import works:', typeof pangu.spacingText === 'function');
9+
console.log('Can access NodePangu:', typeof pangu.NodePangu === 'function');
10+
console.log('NodePangu destructured:', NodePangu !== undefined);
11+
12+
// Test functionality
13+
const text = '測試ESM模組';
14+
const spaced = pangu.spacingText(text);
15+
console.log(`\nTest spacing: "${text}" → "${spaced}"`);
16+
17+
// Test instance creation
18+
const customPangu = new NodePangu();
19+
console.log('Custom instance works:', customPangu.spacingText('測試test') === '測試 test');
20+
21+
// Test that pangu is the instance itself
22+
console.log('\nVerifying pangu is an instance:', pangu instanceof NodePangu);
23+
24+
console.log('\nESM imports working correctly!');

0 commit comments

Comments
 (0)