atoms-element v5.0.0

import http from 'http';

import fs from 'fs';

import path from 'path';

import { fileURLToPath } from 'url';

import { dirname } from 'path';

import renderPage from './pages/index.js';

const __filename = fileURLToPath(import.meta.url);

const __dirname = dirname(__filename);

const rootDir = path.join(__dirname, '..');

const port = process.argv[2] || 3000;

const elements = ['app-counter.js', 'app-total.js'];

const srcMap = {

  '/index.js': `${rootDir}/index.js`,

};

elements.forEach((el) => {

  srcMap['/elements/' + el] = `${__dirname}/elements/${el}`;

});

// lit-html and @lit-labs/ssr-client are real npm dependencies (not vendored),

// so the browser needs an import map for every bare specifier reachable from

// index.js — including ones used by their own internal files, since the

// import map is global to the page, not scoped per-package the way Node's

// node_modules resolution is. The packages' files are served as-is; their

// own internal imports are all relative, so no other wiring is needed.

const importMap = {

  imports: {

    'lit-html': '/node_modules/lit-html/lit-html.js',

    'lit-html/directive.js': '/node_modules/lit-html/directive.js',

    'lit-html/directive-helpers.js': '/node_modules/lit-html/directive-helpers.js',

    'lit-html/private-ssr-support.js': '/node_modules/lit-html/private-ssr-support.js',

    'lit-html/directives/unsafe-html.js': '/node_modules/lit-html/directives/unsafe-html.js',

    'lit-html/directives/class-map.js': '/node_modules/lit-html/directives/class-map.js',

    'lit-html/directives/style-map.js': '/node_modules/lit-html/directives/style-map.js',

    '@lit-labs/ssr-client': '/node_modules/@lit-labs/ssr-client/index.js',

  },

};

const nodeModulesDir = path.join(rootDir, 'node_modules');

http

  .createServer((req, res) => {

    if (req.url.includes('/api/posts')) {

      const parts = req.url.split('/');

      const id = parts[parts.length - 1];

      res.setHeader('Content-type', 'application/json');

      res.end(

        JSON.stringify({

          id,

          title: `post ${id}`,

          description: ` description ${id}`,

        }),

      );

      return;

    }

    if (req.url === '/') {

      res.statusCode = 200;

      res.setHeader('Content-type', 'text/html');

      const html = renderPage({

        lang: 'en',

        props: {

          config: { lang: 'en', title: 'Counter App' },

        },

        headScript: `<script type="importmap">${JSON.stringify(importMap)}</script>`,

        bodyScript: `

          <script type="module">

          ${elements.map((el) => `import './elements/${el}';`).join('\n')}

          </script>

        `,

      });

      res.end(html);

      return;

    }

    if (req.url.startsWith('/node_modules/')) {

      const relative = req.url.slice('/node_modules/'.length);

      const filename = path.normalize(path.join(nodeModulesDir, relative));

      if (filename.startsWith(nodeModulesDir) && fs.existsSync(filename)) {

        res.setHeader('Content-type', filename.endsWith('.css') ? 'text/css' : 'application/javascript');

        res.end(fs.readFileSync(filename));

      } else {

        res.statusCode = 404;

        res.end();

      }

      return;

    }

    const filename = srcMap[req.url];

    if (filename) {

      const data = fs.readFileSync(filename);

      res.setHeader('Content-type', 'application/javascript');

      res.end(data);

      return;

    }

    res.statusCode = 404;

    res.end();

  })

  .listen(parseInt(port));

console.log(`Server listening on http://localhost:${port}`);