@mpeggroup/mpeg-sdl-editor 1.3.1

package/.github/workflows/check-bun-dependencies.yml

@@ -0,0 +1,13 @@
+name: check-bun-dependencies
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: "0 0 * * *"
+permissions:
+  contents: read
+  pull-requests: write
+jobs:
+  call-check-bun-dependencies:
+    uses: flowscripter/.github/.github/workflows/check-bun-dependencies.yml@v1
+    secrets:
+      CREATE_PR_TOKEN: ${{ secrets.CREATE_PR_TOKEN }}

package/.github/workflows/lint-pr-message.yml

@@ -0,0 +1,13 @@
+name: lint-pr-message
+on:
+  pull_request_target:
+    types:
+      - opened
+      - edited
+      - synchronize
+permissions:
+  contents: read
+jobs:
+  call-lint-pr-message:
+    uses: flowscripter/.github/.github/workflows/lint-pr-message.yml@v1
+    secrets: inherit

package/.github/workflows/release-bun-webapp.yml

@@ -0,0 +1,15 @@
+name: release-bun-webapp
+on:
+  push:
+    branches: [main]
+permissions:
+  contents: write
+  issues: write
+  pull-requests: write
+  id-token: write
+  pages: write
+jobs:
+  call-release-bun-webapp:
+    uses: flowscripter/.github/.github/workflows/release-bun-webapp.yml@v1
+    secrets:
+      PUSH_TO_MAIN_TOKEN: ${{ secrets.PUSH_TO_MAIN_TOKEN }}

package/.github/workflows/validate-bun-webapp-pr.yml

@@ -0,0 +1,9 @@
+name: validate-bun-webapp-pr
+on:
+  pull_request:
+    branches: [main]
+permissions:
+  contents: read
+jobs:
+  call-validate-bun-webapp-pr:
+    uses: flowscripter/.github/.github/workflows/validate-bun-webapp-pr.yml@v1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Flowscripter
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,59 @@
+# mpeg-sdl-editor
+
+[![version](https://img.shields.io/github/v/release/mpeggroup/mpeg-sdl-editor?sort=semver)](https://github.com/mpeggroup/mpeg-sdl-editor/releases)
+[![build](https://img.shields.io/github/actions/workflow/status/mpeggroup/mpeg-sdl-editor/release-bun-webapp.yml)](https://github.com/mpeggroup/mpeg-sdl-editor/actions/workflows/release-bun-webapp.yml)
+[![license: MIT](https://img.shields.io/github/license/mpeggroup/mpeg-sdl-editor)](https://github.com/mpeggroup/mpeg-sdl-editor/blob/main/LICENSE)
+
+> ISO/IEC 14496-34 Syntactic Description Language (MPEG SDL) web based editor.
+
+## Hosted Instance
+
+Go to: https://mpeggroup.github.io/mpeg-sdl-editor/
+
+## Parser Library
+
+This editor makes use of: https://github.com/MPEGGroup/mpeg-sdl-parser
+
+## Development
+
+`@mpeggroup/mpeg-sdl-parser` is hosted on GitHub packages, so before installing
+dependencies, authentication needs to be configured. Create a GitHub classic
+personal access token which has permission to read packages and then set it in
+your environment:
+
+`export NPM_GITHUB_TOKEN=<your_classic_pat>`
+
+Install dependencies:
+
+`bun install`
+
+Test:
+
+`bun test`
+
+Serve dev version:
+
+`bun html/index.html`
+
+Bundle:
+
+`bun run build`
+
+**NOTE**: The following tasks use Deno as it excels at these and Bun does not
+currently provide such functionality:
+
+Format:
+
+`deno fmt`
+
+Lint:
+
+`deno lint src/ tests/`
+
+## Functional Tests
+
+Refer to [functional_tests/README.md](functional_tests/README.md)
+
+## License
+
+MIT © Flowscripter

package/build.ts

@@ -0,0 +1,8 @@
+import bunPluginTailwind from "bun-plugin-tailwind";
+
+await Bun.build({
+  entrypoints: ["html/index.html"],
+  outdir: "dist",
+  minify: true,
+  plugins: [bunPluginTailwind],
+});

package/functional_tests/README.md

@@ -0,0 +1,25 @@
+## Webapp Functional Tests
+
+#### Setup
+
+Ensure the webapp is bundled:
+
+    bun run build
+
+Install requirements:
+
+    pip3 install -r pip-requirements.txt
+
+Install `geckodriver` from https://github.com/mozilla/geckodriver/releases and
+ensure the executable is in your _PATH_.
+
+#### Testing
+
+Run the functional tests:
+
+    behave
+
+To run with logging output from the test steps (this is the best set of
+arguments I can find):
+
+    behave --no-logcapture --no-color --logging-level=DEBUG

package/functional_tests/features/environment.py

@@ -0,0 +1,50 @@
+from behave import fixture, use_fixture
+from selenium.webdriver import Firefox
+from selenium.webdriver import FirefoxOptions
+from http.server import SimpleHTTPRequestHandler
+from functools import partial
+import socketserver
+import threading
+import pathlib
+
+address = "127.0.0.1"
+port = 8000
+
+
+@fixture
+def browser_firefox(context):
+    options = FirefoxOptions()
+    options.add_argument("-headless")
+    context.browser = Firefox(options=options)
+    yield context.browser
+    context.browser.quit()
+
+
+@fixture
+def local_webserver(context):
+    web_root = pathlib.Path(__file__).parent.parent.parent.joinpath("dist")
+
+    handler_class = partial(SimpleHTTPRequestHandler, directory=web_root)
+
+    socketserver.TCPServer.allow_reuse_address = True
+
+    httpd = socketserver.TCPServer((address, port), handler_class)
+
+    server_thread = threading.Thread(target=httpd.serve_forever)
+    server_thread.daemon = True
+    server_thread.start()
+
+    def shutdown_webserver():
+        httpd.shutdown()
+        httpd.server_close()
+        server_thread.join()
+
+    context.add_cleanup(shutdown_webserver)
+
+
+def before_all(context):
+    context.config.setup_logging()
+    use_fixture(local_webserver, context)
+    use_fixture(browser_firefox, context)
+    context.address = address
+    context.port = port

package/functional_tests/features/steps/helper/selenium.py

@@ -0,0 +1,15 @@
+class element_value_is_non_empty(object):
+    """An expectation for checking that an element has a text value which is not empty.
+
+    locator - used to find the element
+    returns the WebElement once it has a non empty value
+    """
+    def __init__(self, locator):
+        self.locator = locator
+
+    def __call__(self, driver):
+        element = driver.find_element(*self.locator)
+        if len(element.get_property('value')) > 0:
+            return element
+        else:
+            return False

package/functional_tests/features/steps/webapp.py

@@ -0,0 +1,30 @@
+from behave import when, then
+from selenium.webdriver.support.expected_conditions import presence_of_element_located
+from selenium.webdriver.support.wait import WebDriverWait
+from selenium.webdriver.common.by import By
+from helper.selenium import element_value_is_non_empty
+
+import logging
+
+log = logging.getLogger("webapp")
+
+
+@when('the webapp URL "{page}" is loaded')
+def step_impl(context, page):
+    url = "http://{}:{}/{}".format(context.address, context.port, page)
+    context.browser.get(url)
+
+
+@then('the page element with data-testid "{element_id}" should be available')
+def step_impl(context, element_id):
+    log.debug('waiting for element "{}"'.format(element_id))
+
+    try:
+        log.debug('waiting for element "{}"'.format(element_id))
+        WebDriverWait(context.browser, 3).until(presence_of_element_located((By.CSS_SELECTOR, '[data-testid="{}"]'.format(element_id))))
+    except Exception as e:
+        log.error('Element not found: {}'.format(e))
+        log.debug('Page source: {}'.format(context.browser.page_source))
+        log.debug('Current URL: {}'.format(context.browser.current_url))
+        raise
+

package/functional_tests/features/webapp.feature

@@ -0,0 +1,5 @@
+Feature: Webapp
+
+  Scenario: Webapp success
+    When the webapp URL "index.html" is loaded
+    Then the page element with data-testid "main-content" should be available

package/functional_tests/pip-requirements.txt

@@ -0,0 +1,2 @@
+selenium
+behave

package/html/favicon.svg

@@ -0,0 +1,126 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg
+  id="Layer_1"
+  xmlns="http://www.w3.org/2000/svg"
+  version="1.1"
+  viewBox="220 10 450 450"
+>
+  <defs>
+    <style>.st0 {
+      fill: #08a6e0;
+    }
+
+    .st1 {
+      fill: #006fa9;
+    }
+
+    .st2 {
+      fill: #0071bb;
+    }
+
+    .st3 {
+      fill: #002a53;
+    }</style>
+  </defs>
+  <path
+    class="st3"
+    d="M421.2,445.7c0,6.2-5,11.2-11.2,11.2s-11.2-5-11.2-11.2,5-11.2,11.2-11.2,11.2,5,11.2,11.2"
+  />
+  <g>
+    <rect class="st2" x="292.5" y="348.4" width="39.2" height="39.2" />
+    <rect class="st1" x="292.5" y="230.9" width="39.2" height="39.2" />
+    <rect class="st2" x="292.5" y="113.4" width="39.2" height="39.2" />
+    <path
+      class="st2"
+      d="M292.5,74.2h39.2v-19.6c0-10.8-8.8-19.6-19.6-19.6s-19.6,8.8-19.6,19.6v19.6Z"
+    />
+    <path
+      class="st2"
+      d="M463.1,348.4h0c10.8,0,19.6-8.8,19.6-19.6v-19.6h-39.2v19.6c0,10.8,8.8,19.6,19.6,19.6"
+    />
+    <rect class="st2" x="443.6" y="191.7" width="39.2" height="39.2" />
+    <path
+      class="st1"
+      d="M443.6,152.6h39.2v-19.6c0-10.8-8.8-19.6-19.6-19.6s-19.6,8.8-19.6,19.6v19.6Z"
+    />
+    <rect class="st2" x="342.8" y="270.1" width="39.2" height="39.2" />
+    <rect class="st2" x="342.8" y="152.6" width="39.2" height="39.2" />
+    <rect class="st2" x="393.2" y="211.3" width="39.2" height="39.2" />
+    <path
+      class="st2"
+      d="M393.2,133h39.2v-19.6c0-10.8-8.8-19.6-19.6-19.6s-19.6,8.8-19.6,19.6v19.6Z"
+    />
+    <rect class="st3" x="292.5" y="309.2" width="39.2" height="39.2" />
+    <rect class="st3" x="292.5" y="191.7" width="39.2" height="39.2" />
+    <rect class="st3" x="292.5" y="74.2" width="39.2" height="39.2" />
+    <rect class="st3" x="443.6" y="270.1" width="39.2" height="39.2" />
+    <rect class="st3" x="443.6" y="152.6" width="39.2" height="39.2" />
+    <path
+      class="st3"
+      d="M362.4,387.6h0c10.8,0,19.6-8.8,19.6-19.6v-19.6h-39.2v19.6c0,10.8,8.8,19.6,19.6,19.6"
+    />
+    <rect class="st3" x="342.8" y="230.9" width="39.2" height="39.2" />
+    <rect class="st3" x="393.2" y="172.1" width="39.2" height="39.2" />
+    <rect class="st2" x="393.2" y="289.6" width="39.2" height="39.2" />
+    <rect class="st3" x="393.2" y="250.5" width="39.2" height="39.2" />
+    <rect class="st3" x="342.8" y="113.4" width="39.2" height="39.2" />
+    <path
+      class="st0"
+      d="M312.1,426.7h0c10.8,0,19.6-8.8,19.6-19.6v-19.6h-39.2v19.6c0,10.8,8.8,19.6,19.6,19.6"
+    />
+    <rect class="st0" x="292.5" y="270.1" width="39.2" height="39.2" />
+    <rect class="st0" x="292.5" y="152.6" width="39.2" height="39.2" />
+    <rect class="st0" x="443.6" y="230.9" width="39.2" height="39.2" />
+    <rect class="st0" x="342.8" y="309.2" width="39.2" height="39.2" />
+    <path
+      class="st3"
+      d="M563.9,270.1h0c10.8,0,19.6-8.8,19.6-19.6v-19.6h-39.2v19.6c0,10.8,8.8,19.6,19.6,19.6"
+    />
+    <path
+      class="st2"
+      d="M544.3,230.9h39.2v-19.6c0-10.8-8.8-19.6-19.6-19.6s-19.6,8.8-19.6,19.6v19.6Z"
+    />
+    <g>
+      <rect class="st2" x="493.9" y="230.9" width="39.2" height="39.2" />
+      <path
+        class="st3"
+        d="M513.5,152.6h0c-10.8,0-19.6,8.8-19.6,19.6v19.6h39.2v-19.6c0-10.8-8.8-19.6-19.6-19.6"
+      />
+      <path
+        class="st3"
+        d="M533.1,270.1h-39.2v19.6c0,10.8,8.8,19.6,19.6,19.6s19.6-8.8,19.6-19.6v-19.6Z"
+      />
+      <rect class="st0" x="493.9" y="191.7" width="39.2" height="39.2" />
+    </g>
+    <rect class="st0" x="342.8" y="191.7" width="39.2" height="39.2" />
+    <path
+      class="st3"
+      d="M412.8,368h0c10.8,0,19.6-8.8,19.6-19.6v-19.6h-39.2v19.6c0,10.8,8.8,19.6,19.6,19.6"
+    />
+    <rect class="st0" x="393.2" y="133" width="39.2" height="39.2" />
+    <path
+      class="st0"
+      d="M342.8,113.4h39.2v-19.6c0-10.8-8.8-19.6-19.6-19.6s-19.6,8.8-19.6,19.6v19.6Z"
+    />
+    <path
+      class="st3"
+      d="M482.7,88.2c0,10.8-8.8,19.6-19.6,19.6s-19.6-8.8-19.6-19.6,8.8-19.6,19.6-19.6,19.6,8.8,19.6,19.6"
+    />
+    <path
+      class="st1"
+      d="M432.4,398.1c0,10.8-8.8,19.6-19.6,19.6s-19.6-8.8-19.6-19.6,8.8-19.6,19.6-19.6,19.6,8.8,19.6,19.6"
+    />
+    <path
+      class="st0"
+      d="M521.9,85.4c0,6.2-5,11.2-11.2,11.2s-11.2-5-11.2-11.2,5-11.2,11.2-11.2,11.2,5,11.2,11.2"
+    />
+    <path
+      class="st1"
+      d="M505.1,49c0,7.7-6.3,14-14,14s-14-6.3-14-14,6.3-14,14-14,14,6.3,14,14"
+    />
+    <path
+      class="st0"
+      d="M465.9,426.1c0,7.7-6.3,14-14,14s-14-6.3-14-14,6.3-14,14-14,14,6.3,14,14"
+    />
+  </g>
+</svg>

package/html/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
+    <title>MPEG SDL Editor</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="../src/main.tsx"></script>
+  </body>
+</html>

package/html/style.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@plugin "daisyui";

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@mpeggroup/mpeg-sdl-editor",
+  "description": "ISO/IEC 14496-34 Syntactic Description Language (MPEG SDL) web based editor",
+  "homepage": "https://github.com/MPEGGroup/mpeg-sdl-editor#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/MPEGGroup/mpeg-sdl-editor.git"
+  },
+  "license": "MIT",
+  "keywords": [
+    "bun",
+    "mpeg",
+    "sdl",
+    "parser",
+    "editor"
+  ],
+  "type": "module",
+  "version": "1.3.1",
+  "scripts": {
+    "build": "bun build.ts"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@happy-dom/global-registrator": "20.9.0",
+    "@testing-library/dom": "10.4.1",
+    "@testing-library/react": "16.3.2",
+    "@types/bun": "1.3.13",
+    "bun-plugin-tailwind": "0.1.2",
+    "happy-dom": "20.9.0"
+  },
+  "peerDependencies": {
+    "typescript": "6.0.3",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3"
+  },
+  "dependencies": {
+    "@codemirror/language": "6.12.1",
+    "@codemirror/lint": "6.9.2",
+    "@lezer/common": "1.5.0",
+    "@lezer/highlight": "1.2.3",
+    "@mpeggroup/mpeg-sdl-parser": "4.1.1",
+    "@types/wicg-file-system-access": "2023.10.7",
+    "@uiw/codemirror-theme-vscode": "4.25.9",
+    "@uiw/react-codemirror": "4.25.9",
+    "daisyui": "5.5.19",
+    "react": "19.2.5",
+    "react-dom": "19.2.5",
+    "tailwindcss": "4.2.4"
+  },
+  "overrides": {
+    "@codemirror/language": "6.12.1",
+    "@codemirror/lint": "6.9.2",
+    "@codemirror/state": "6.5.4",
+    "@codemirror/view": "6.39.9",
+    "@lezer/common": "1.5.0",
+    "@lezer/highlight": "1.2.3",
+    "@lezer/lr": "1.4.7"
+  }
+}

package/src/App.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;