From dfbd1ab7a976129b0a16a6488c74613bdc4fef01 Mon Sep 17 00:00:00 2001 From: Pradip Chaudhary Date: Thu, 15 Feb 2024 21:08:21 +0545 Subject: [PATCH] init basic tree shaking for unused code app [project99] --- 99-Tree Shaking for Unused Code/index.html | 22 +++++++++++ 99-Tree Shaking for Unused Code/script.js | 44 ++++++++++++++++++++++ 99-Tree Shaking for Unused Code/styles.css | 29 ++++++++++++++ 3 files changed, 95 insertions(+) create mode 100644 99-Tree Shaking for Unused Code/index.html create mode 100644 99-Tree Shaking for Unused Code/script.js create mode 100644 99-Tree Shaking for Unused Code/styles.css diff --git a/99-Tree Shaking for Unused Code/index.html b/99-Tree Shaking for Unused Code/index.html new file mode 100644 index 0000000..0601d82 --- /dev/null +++ b/99-Tree Shaking for Unused Code/index.html @@ -0,0 +1,22 @@ + + + + + + + Tree Shaking App + + +
+

Tree Shaking App

+ + +
+
+ + + + diff --git a/99-Tree Shaking for Unused Code/script.js b/99-Tree Shaking for Unused Code/script.js new file mode 100644 index 0000000..00a360a --- /dev/null +++ b/99-Tree Shaking for Unused Code/script.js @@ -0,0 +1,44 @@ +function performTreeShaking() { + const inputCode = document.getElementById("inputCode").value; + + if (!inputCode.trim()) { + alert("Please enter JavaScript code for tree shaking."); + return; + } + + // In a real-world scenario, you would use a build tool like Webpack with Babel for tree shaking. + // Here, we'll use a simplified example to illustrate the process. + + try { + const treeShakenCode = treeShakeCode(inputCode); + displayResult(treeShakenCode); + } catch (error) { + alert(`Error during tree shaking: ${error.message}`); + } +} + +function treeShakeCode(code) { + // Placeholder for tree shaking logic using Babel + // In practice, you'd need a build tool like Webpack with Babel and proper configuration for tree shaking. + // Here, we'll use a simple logic to illustrate the concept. + + const { transform } = require("@babel/core"); + const presetEnv = require("@babel/preset-env"); + + const result = transform(code, { + presets: [ + [presetEnv, { modules: false }], // Set modules to false to enable tree shaking + ], + }); + + if (result && result.code) { + return result.code; + } else { + throw new Error("Failed to perform tree shaking."); + } +} + +function displayResult(result) { + const outputCode = document.getElementById("outputCode"); + outputCode.textContent = result; +} diff --git a/99-Tree Shaking for Unused Code/styles.css b/99-Tree Shaking for Unused Code/styles.css new file mode 100644 index 0000000..d1e4bf8 --- /dev/null +++ b/99-Tree Shaking for Unused Code/styles.css @@ -0,0 +1,29 @@ +body { + font-family: Arial, sans-serif; + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + margin: 0; +} + +.container { + text-align: center; +} + +textarea { + width: 100%; + height: 150px; + margin: 10px 0; +} + +button { + padding: 10px 20px; + font-size: 16px; + margin: 10px; +} + +#outputCode { + margin-top: 20px; + font-size: 18px; +}