shinaisan/index.js

## index.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;
    }
  });
})();


## mksrc.sh
#!/bin/bash

test -d src || mkdir src
cp -v index.js *.pegjs template.html src


## package.json
{
  "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": "shinaisan@users.noreply.github.com",
  "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"
  }
}

## source.pegjs
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); }


## template.html
<!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>


## webpack.config.js
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')
    })
  ]
};
	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": "shinaisan@users.noreply.github.com",
	"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')
	})
	]
	};