Skip to content

Instantly share code, notes, and snippets.

@shinaisan
Last active September 11, 2018 11:05
Show Gist options
  • Save shinaisan/ba5543d39a71bcebc1dabb7411d2f7d7 to your computer and use it in GitHub Desktop.
Save shinaisan/ba5543d39a71bcebc1dabb7411d2f7d7 to your computer and use it in GitHub Desktop.
Example of pegjs (PEG.js)
import peg from 'pegjs';
import pegSrc from './source.pegjs';
(() => {
// Event handler
const button = document.getElementById('button-parse');
button.addEventListener('click', (evt) => {
const div = document.getElementById('div-output');
try {
// Input
const textarea = document.getElementById('textarea-source');
const source = textarea.value;
// Parser
const parser = peg.generate(pegSrc);
const result = parser.parse(source.trim());
// DOM
div.innerText = result;
} catch (err) {
div.innerText = err.message;
}
});
})();
#!/bin/bash
test -d src || mkdir src
cp -v index.js *.pegjs template.html src
{
"name": "pegjs-example-1",
"version": "1.0.0",
"description": "Example of pegjs",
"main": "index.js",
"scripts": {
"webpack": "webpack",
"start:dev": "webpack-serve ./webpack.config.js --no-reload",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "[email protected]",
"license": "ISC",
"dependencies": {
"pegjs": "^0.10.0"
},
"devDependencies": {
"@babel/core": "^7.0.0",
"babel-loader": "^8.0.2",
"babel-preset-env": "^1.7.0",
"css-loader": "^1.0.0",
"html-webpack-plugin": "^3.2.0",
"raw-loader": "^0.5.1",
"style-loader": "^0.23.0",
"webpack": "^4.18.0",
"webpack-cli": "^3.1.0",
"webpack-serve": "^2.0.2"
}
}
start
= additive
additive
= left:multiplicative "+" right:additive { return left + right; }
/ multiplicative
multiplicative
= left:primary "*" right:multiplicative { return left * right; }
/ primary
primary
= integer
/ "(" additive:additive ")" { return additive; }
integer "integer"
= digits:[0-9]+ { return parseInt(digits.join(""), 10); }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example of pegjs (PEG.js)</title>
</head>
<body>
<div>
<form onsubmit="return false;">
<textarea id="textarea-source" rows="10" style="width: 100%"></textarea>
<button id="button-parse">Parse</button>
</form>
</div>
<div id="div-output">
</div>
</body>
</html>
const HtmlWebpackPlugin = require('html-webpack-plugin'); // Installed via npm
const webpack = require('webpack'); // To access built-in plugins
const path = require('path');
const paths = {
src: path.join(__dirname, 'src'),
dist: path.join(__dirname, 'dist'),
public: path.join(__dirname, 'public')
};
const HOST = process.env.HOST;
module.exports = {
mode: process.env.WEBPACK_SERVE ? 'development' : 'production',
// Or pass it as a CLI argument: webpack --mode=production
target: 'web', // Default
entry: {
main: path.join(paths.src, 'index.js')
},
output: {
path: path.resolve(paths.dist),
filename: '[name].js',
pathinfo: true
},
module: {
rules: [
{
test: /\.(txt|md|pegjs)$/,
use: 'raw-loader'
},
{ // webpack --module-bind 'css=style-loader!css-loader'
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true // Enable CSS Modules
}
}
]
},
{
test: /\.(js|jsx)$/,
include: paths.src,
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
presets: ["env"],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: false
},
}
]
},
performance: {
hints: "warning",
maxEntrypointSize: 1000000,
maxAssetSize: 1000000
},
devtool: "source-map",
serve: {
host: HOST,
port: 3000,
content: paths.dist,
logLevel: 'debug'
},
stats: "verbose",
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.join(paths.src, 'template.html')
})
]
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment