Configuration for Development Environment

The configuration options for the development environment of the Screenly Chrome extension can be adjusted via various files where environment specifics can be set. The following sections describe the primary configuration files, the important settings you might need to modify, and provide specific code examples.

Docker Configuration

The docker-compose.yml file is crucial for setting up the development environment. It specifies the services, commands, and other configurations needed for the build process.

Example Configuration:

services:
  webpack:
    build: .
    command: npx webpack --watch --config webpack.dev.js
    image: sce_webpack:latest
    volumes:
      - .:/app:delegated
      - /app/node_modules/  # Exclude node_modules from mount; included in container
    environment:
      - JEKYLL_ENV=development

Key Points:

• The command clearly indicates how to run the Webpack with watch mode.
• The volumes configuration helps in syncing the code and keeping node_modules inside the container to avoid conflicts.
• JEKYLL_ENV is set to development indicating that the environment is geared towards development.

ESLint Configuration

The eslint.config.mjs file sets up JavaScript linting rules and specifies environments that the code will be expected to run in.

Example Configuration:

import jasmine from "eslint-plugin-jasmine";
import globals from "globals";
import path from "node:path";
import { fileURLToPath } from "node:url";
import js from "@eslint/js";
import { FlatCompat } from "@eslint/eslintrc";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
    baseDirectory: __dirname,
    recommendedConfig: js.configs.recommended,
    allConfig: js.configs.all
});

export default [
    ...compat.extends("eslint:recommended", "plugin:jasmine/recommended"),
    {
        ignores: [
            "src/lib/vendor/",
            "node_modules/",
            "dist/",
        ]
    },
    {
        plugins: {
            jasmine,
        },
        languageOptions: {
            globals: {
                ...globals.browser,
                ...globals.jasmine,
                ...globals.node,
                Atomics: "readonly",
                SharedArrayBuffer: "readonly",
            },
            ecmaVersion: "latest",
            sourceType: "module",
        },
        rules: {},
    }
];

Key Points:

• This file extends the existing ESLint configurations and sets up specific ignores for directories that should not be scanned.
• The languageOptions helps specify the environments and JavaScript specifications to ensure proper linting.

Boot Options Script

The boot-options.mjs file is utilized to initialize application options upon startup.

Example Code:

'use strict';

import { initOptions } from "./options.mjs";

initOptions();

Key Points:

• The initOptions() function call ensures that options are correctly set during app initialization.

Shell Scripts for Building and Testing

Shell scripts provide commands for building the docker image and running tests. Two significant scripts are host_eslint.sh and run_tests.sh.

Example for host_eslint.sh:

#!/usr/bin/env bash

set -euo pipefail
IFS=$'\n\t'

docker run \
    --rm \
    -v $(pwd):$(pwd):delegated \
    sce_webpack:latest \
    /app/node_modules/.bin/eslint $@

Example for run_tests.sh:

#!/usr/bin/env bash

set -euo pipefail

docker compose build
docker run \
    --rm -ti \
    -v $(pwd):/app:delegated \
    -v /app/node_modules \
    sce_webpack:latest \
    /bin/bash -c "npx webpack --config webpack.dev.js && npm test"

Key Points:

• The host_eslint.sh script runs ESLint by utilizing Docker, ensuring a consistent linting environment.
• The run_tests.sh script builds the Docker container and then executes Webpack followed by the tests. This ensures that tests are run against the latest build.

Options HTML File

The user interface for the options can be controlled via src/options.html, where the user can interact with the extension.

Example Snippet:

<html>
<head>
    <title>Options - Screenly</title>
</head>
<body>
    <div id="container">
        <h1>Options</h1>
        <div id="signInSection">
            <h2>Sign In</h2>
            <p>Unable to sign in. Check your credentials and internet connectivity, then try again.</p>
            <a href="#">Need an account? Sign Up.</a>
        </div>
    </div>
</body>
</html>

Key Points:

• The HTML structure should allow users to interact with sign-in functionality gracefull.
• The IDs and structure should be accessible in JavaScript to modify options accordingly.

This should provide a comprehensive overview of how to configure the development environment for the Screenly Chrome extension, utilizing various configuration files and scripts to manage environment settings effectively.