Dom Parser Test

A React-based web application designed to demonstrate and experiment with the browser's native DOMParser API. The tool allows developers to parse HTML strings into structured DOM documents, inspect and manipulate nodes programmatically, and visualize parsing results in real time.

Built in May 2020 using modern React functional components and hooks, it serves as a lightweight sandbox for understanding browser parsing behavior and testing HTML transformations efficiently. Includes real-time preview and safe experimentation for debugging HTML parsing workflows.

• 🔍 Test DOMParser API functionality
• ⚛️ React functional components with hooks
• 🎨 SCSS styling with modular architecture
• 🔄 React Router ready for navigation
• 📱 Progressive Web App (PWA) capabilities
• 🧪 Jest testing framework integrated
• 🚀 Optimized production builds

• DOMParser API Testing: Direct experimentation with the browser's native DOMParser
• Real-time Preview: Live visualization of parsed HTML results
• HTML Transformation Testing: Safe sandbox for testing HTML manipulation workflows
• DOM Inspection: Programmatic node inspection and manipulation

• React Functional Components: Modern React with hooks for state management
• Type Safety: PropTypes for component type checking
• Testing: Jest testing framework with watch mode
• Build Optimization: Webpack-based production builds with cache busting
• SCSS Architecture: Modular styling with SCSS

• Hot Module Replacement: Real-time updates during development
• Create React App: Standardized tooling and configuration
• ESLint Integration: Code quality checks built-in
• Progressive Web App: Offline capabilities and app-like experience

The application uses Create React App's environment variable system:

1. Create a .env file in the root directory
2. Add variables with the REACT_APP_ prefix:

   REACT_APP_API_URL=https://api.example.com
   

3. Access them in your code:

   const apiUrl = process.env.REACT_APP_API_URL;

For advanced configuration options, refer to the Create React App documentation.

This project follows clean React application principles:

1. Component-Based: All UI elements are reusable React components
2. Separation of Concerns: Logic, presentation, and styling are separated
3. State Management: React hooks for local state management
4. Testability: Components designed for easy testing with Jest
5. Progressive Enhancement: PWA capabilities for modern browsers

• Higher-Order Components (HOCs): Layout wrapper for consistent page structure
• Container/Presenter: Separation of logic and presentation in components
• React Hooks: useState and useEffect for state and side effects

dom-parser-test/
├── public/              # Static files
│   ├── index.html       # HTML template
│   ├── manifest.json    # PWA manifest
│   └── robots.txt       # SEO configuration
├── src/
│   ├── containers/      # Container components
│   │   └── App/         # Main application logic
│   ├── hoc/             # Higher-order components
│   │   └── Layout/      # Layout wrapper component
│   ├── index.jsx        # Application entry point
│   ├── index.scss       # Global styles
│   ├── serviceWorker.js # PWA service worker
│   └── setupTests.js    # Test configuration
├── config/              # Webpack configuration
├── scripts/             # Build and dev scripts
└── package.json         # Dependencies and scripts

graph TD
    A[index.jsx] --> B[BrowserRouter]
    B --> C[App Container]
    C --> D[Layout HOC]
    D --> E[DOMParser Logic]
    E --> F[Parsed HTML Output]

    G[Service Worker] --> H[PWA Capabilities]

    I[SCSS Styles] --> D

    style A fill:#e1f5ff
    style C fill:#fff4e1
    style E fill:#ffe1e1
    style G fill:#e1ffe1

Runs the app in development mode with hot reloading:

npm start

Open http://localhost:3000 to view it in the browser.

1. Enter HTML strings in the input area
2. See real-time parsed results
3. Experiment with different HTML structures
4. Inspect the generated DOM programmatically

Builds the app for production to the build folder:

npm run build

It correctly bundles React in production mode and optimizes the build for the best performance.

1. Use Functional Components: Prefer functional components with hooks over class components
2. Add PropTypes: Always define PropTypes for component type checking
3. Modular Styles: Keep component styles in corresponding .scss files
4. Test Changes: Run npm test to ensure tests pass before committing

1. Build First: Always test production builds with npm run build
2. Check Bundle Size: Monitor bundle size for performance
3. PWA Considerations: Decide whether to enable/disable service worker
4. Browser Testing: Test on target browsers before deployment

• Node.js (v14 or higher)
• npm or yarn

1. Clone the repository:

git clone https://github.com/orassayag/dom-parser-test.git
cd dom-parser-test

2. Install dependencies:

npm install

3. Start the development server:

npm start

Open http://localhost:3000 to view it in the browser.

Runs the app in development mode:

npm start

Builds the app for production:

npm run build

Launches the test runner:

npm test

The application demonstrates the DOMParser API:

const parser = new DOMParser();
const parsedHtml = parser.parseFromString(
  '<html><body><div id="test1"></div></body></html>',
  'text/html'
);
const element = parsedHtml.getElementById('test1');
console.log(element);

sequenceDiagram
    participant User
    participant App
    participant DOMParser
    participant DOM

    User->>App: Load Application
    App->>DOMParser: Create Parser Instance
    DOMParser->>DOMParser: parseFromString()
    DOMParser->>DOM: Generate DOM Tree
    DOM->>App: Return Parsed Element
    App->>User: Display Result

• React 16.13.1 - UI library
• React Router 5.2.0 - Navigation
• React Hooks - State management
• SCSS - Styling
• Webpack 4.42.0 - Module bundler
• Babel 7.9.0 - JavaScript compiler
• Jest 24.9.0 - Testing framework
• ESLint - Code quality

1. Create components in src/components/ or src/containers/
2. Add styles in corresponding .scss files
3. Use React hooks for state management
4. Define PropTypes for type checking

# Run tests in watch mode
npm test

# Run tests with coverage
npm test -- --coverage

# Create optimized build
npm run build

# The build folder is ready to be deployed

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers with ES6+ support

This application includes PWA capabilities:

• Offline functionality
• Fast loading
• App-like experience
• Install to home screen

To disable PWA features, change serviceWorker.register() to serviceWorker.unregister() in src/index.jsx.

Contributions to this project are released to the public under the project's open source license.

Everyone is welcome to contribute. Contributing doesn't just mean submitting pull requests—there are many different ways to get involved, including answering questions and reporting issues.

Please feel free to contact me with any question, comment, pull-request, issue, or any other thing you have in mind.

See CONTRIBUTING.md for detailed contribution guidelines.

• Or Assayag - Initial work - orassayag
• Or Assayag orassayag@gmail.com
• GitHub: https://github.com/orassayag
• StackOverflow: https://stackoverflow.com/users/4442606/or-assayag?tab=profile
• LinkedIn: https://linkedin.com/in/orassayag

This application has an MIT license - see the LICENSE file for details.

• Built for educational and research purposes
• Respects robots.txt and implements rate limiting
• Uses user-agent rotation to avoid detection
• Implements polite crawling practices