@live-change/email-service 0.9.33 → 0.9.34

package/browser.js

@@ -0,0 +1,55 @@
+import App from '@live-change/framework'
+const app = App.app()
+
+import definition from './definition.js'
+import config from './config.js'
+
+import { chromium } from 'playwright'
+
+import PQueue from 'p-queue'
+import got from "got"
+
+import dns from "dns/promises"
+
+const browserQueue = new PQueue({ concurrency: config.browser.concurrency })
+
+async function newBrowser() {
+  if(config.browser.webSocketDebuggerUrl) {
+    const browser = await chromium.connect({ wsEndpoint: config.browser.webSocketDebuggerUrl })
+    return browser
+  } else if(config.browser.url) {
+    const browserInfo = await got.post(config.browser.url + '/json/version').json()
+    const browser = await chromium.connect({ wsEndpoint: browserInfo.webSocketDebuggerUrl })
+    return browser
+  } if(config.browser.host) {
+    const ip = await dns.resolve4(config.browser.host)
+    const browserInfoUrl = `http://${ip}:${config.browser.port}/json/version`
+    console.log("Browser info url", browserInfoUrl)
+    const browserInfo = await got.post(browserInfoUrl).json()
+    console.log("Browser info", browserInfo)
+    try {
+      const browser = await chromium.connectOverCDP(browserInfo.webSocketDebuggerUrl)
+      return browser
+    } catch (error) {
+      console.error("Failed to connect to browser", error)
+      throw error
+    }
+  } else {
+    const browser = await chromium.launch({
+      headless: true
+    })
+    return browser
+  }
+}
+
+export async function runWithBrowser(func) {
+  return await browserQueue.add(async () => {
+    const browser = await newBrowser()
+    try {
+      const result = await func(browser)
+      return result
+    } finally {
+      await browser.close()
+    }
+  })
+}

package/config.js

@@ -0,0 +1,53 @@
+import definition from './definition.js'
+import crypto from 'crypto'
+
+// Helper function to get value with fallback
+const getValue = (configValue, envValue, defaultValue) => 
+  configValue ?? envValue ?? defaultValue
+
+// Helper function to convert value to number
+const getNumberValue = (configValue, envValue, defaultValue) => 
+  +(getValue(configValue, envValue, defaultValue))
+
+// Browser configuration
+const browser = {
+  url: getValue(definition.config.browser?.url, process.env.BROWSER_URL),
+  webSocketDebuggerUrl: getValue(
+    definition.config.browser?.webSocketDebuggerUrl, 
+    process.env.BROWSER_WEBSOCKET_DEBUGGER_URL
+  ),
+  host: getValue(definition.config.browser?.host, process.env.BROWSER_HOST),
+  port: getNumberValue(definition.config.browser?.port, process.env.BROWSER_PORT, 9222),
+  concurrency: getNumberValue(definition.config.browser?.concurrency, process.env.BROWSER_CONCURRENCY, 1),
+  renderAuthenticationKey: getValue(
+    definition.config.browser?.renderAuthenticationKey, 
+    null, 
+    crypto.randomBytes(24).toString('hex')
+  ),
+  ssrUrl: getValue(
+    definition.config.browser?.ssrUrl, 
+    process.env.SSR_URL, 
+    'http://localhost:8001'
+  ),
+}
+
+// SMTP configuration
+const smtp = {
+  host: getValue(definition.config.smtp?.host, process.env.SMTP_HOST),
+  port: getNumberValue(definition.config.smtp?.port, process.env.SMTP_PORT, 587),
+  auth: {
+    user: getValue(definition.config.smtp?.user, process.env.SMTP_USER),
+    pass: getValue(definition.config.smtp?.password, process.env.SMTP_PASSWORD),
+  },
+  // deduce secure from port, include all secure ports  
+  secure: getValue(definition.config.smtp?.secure, [465, 587, 2525].includes(definition.config.smtp?.port)),
+  ignoreTLS: getValue(definition.config.smtp?.ignoreTLS, undefined),
+}
+
+const renderMethod = getValue(definition.config.renderMethod, process.env.RENDER_METHOD, 'juice')
+
+definition.clientConfig = {}
+
+const config = { browser, smtp, renderMethod }
+
+export default config

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/email-service",
-  "version": "0.9.33",
+  "version": "0.9.34",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -21,14 +21,17 @@
     "url": "https://www.viamage.com/"
   },
   "dependencies": {
-    "@live-change/framework": "^0.9.33",
+    "@live-change/framework": "^0.9.34",
     "got": "^11.8.6",
     "html-to-text": "8.1.0",
     "inline-css": "4.0.2",
     "jsdom": "^24.1.0",
     "juice": "11.0.0",
-    "nodemailer": "^6.7.2"
+    "nodemailer": "^6.7.2",
+    "postcss": "8.5.3",
+    "postcss-calc": "10.1.1",
+    "postcss-custom-properties": "14.0.4"
   },
-  "gitHead": "c6eaa7764dc12b9489b74386b1227b71d0640e09",
+  "gitHead": "e5f22de77fe6a3c0a0e1b91d17593e195aaae3b3",
   "type": "module"
 }

package/render-experiment.js

@@ -0,0 +1,134 @@
+const url = process.argv[2]
+
+import got from 'got'
+import juice from 'juice'
+
+import fs from 'fs'
+
+import { JSDOM } from 'jsdom'
+
+import postcss from 'postcss';
+import postcssCustomProperties from 'postcss-custom-properties';
+import postcssCalc from 'postcss-calc';
+
+const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
+
+console.log('url', url)
+const response = await got(url)
+let body = response.body
+
+fs.writeFileSync('body.html', body)
+
+const juiceOptions = {
+  webResources: {
+    scripts: false,
+    links: true,
+    images: false,
+    resolveCSSVariables: true,
+    relativeTo: url
+  }
+}
+
+const processCSS = async (css) => {
+  const result = await postcss([
+    postcssCustomProperties(),
+    postcssCalc()
+  ]).process(css, { from: undefined });
+
+  return result.css;
+};
+
+const fetchAndProcessCSS = async (html, baseUrl) => {
+  const dom = new JSDOM(html);
+  const document = dom.window.document;
+  let collectedCSS = "";
+
+  // Pobieramy CSS z <style> w dokumencie
+  const styleTags = document.querySelectorAll('style');
+  for (const styleTag of styleTags) {
+    collectedCSS += styleTag.textContent + "\n";
+    styleTag.remove(); // Usuwamy, bo później wstawimy jeden poprawiony <style>
+  }
+
+  // Pobieramy CSS z <link rel="stylesheet" href="...">
+  const linkTags = document.querySelectorAll('link[rel="stylesheet"]');
+  for (const linkTag of linkTags) {
+    const href = linkTag.href;
+    if (href) {
+      try {
+        const absoluteUrl = new URL(href, baseUrl).href;
+        console.log(`Fetching CSS from: ${absoluteUrl}`);
+        const response = await got(absoluteUrl);
+        collectedCSS += response.body + "\n";
+      } catch (error) {
+        console.warn(`Failed to fetch CSS: ${href}`, error.message);
+      }
+    }
+    linkTag.remove(); // Usuwamy, bo CSS już inline'ujemy
+  }
+
+  fs.writeFileSync('collectedCSS.css', collectedCSS)
+  // Przetwarzamy zebrany CSS
+  const processedCSS = await processCSS(collectedCSS);
+
+  fs.writeFileSync('processedCSS.css', processedCSS)
+  // Dodajemy nowy przetworzony CSS do dokumentu
+  const newStyleTag = document.createElement('style');
+  newStyleTag.textContent = processedCSS;
+  document.head.appendChild(newStyleTag);
+
+  return dom.serialize();
+};
+
+body = await fetchAndProcessCSS(body, url)
+
+fs.writeFileSync('body-css.html', body)
+
+/*body = await juice(body, juiceOptions)*/
+body = await new Promise((resolve, reject) => {
+  juice.juiceResources(body, juiceOptions, (err, html) => {
+    if(err) reject(err)
+    else resolve(html)
+  })
+})
+
+const dom = new JSDOM(body)
+fs.writeFileSync('body-juced.html', body)
+
+const htmlElement = dom.window.document.querySelector('[data-html]')
+
+//  traverse all elements and clear all data attributes
+const cleanDataAttributes = (element) => {
+  // Remove all data attributes
+  for(const attr of element.attributes) {
+    if(attr.name.startsWith('data-')) {
+      element.removeAttribute(attr.name)
+    }
+  }
+  for(const child of element.children) {
+    cleanDataAttributes(child)
+  }
+} 
+cleanDataAttributes(htmlElement)
+
+fs.writeFileSync('body-cleaned.html', htmlElement.outerHTML)
+//console.log(htmlElement.outerHTML)
+
+// const juiceOptions = {
+//     webResources: {
+//       scripts: false,
+//       links: true,
+//       images: false,
+//       resolveCSSVariables: true,
+//       relativeTo: url
+//     }
+//   }
+
+// const html = await new Promise((resolve, reject) => {
+//   juice.juiceResources(response.body, juiceOptions, (err, html) => {
+//     if(err) reject(err)
+//     else resolve(html)
+//   })
+// })
+
+// console.log(html)

package/render-experiment2.js

@@ -0,0 +1,95 @@
+import { chromium } from 'playwright';
+import fs from 'fs/promises';
+
+const url = process.argv[2]
+
+const browser = await chromium.launch();
+const page = await browser.newPage();
+
+// Załaduj stronę
+await page.goto(url); // Podmień na swoją stronę
+
+const inlineHtml = await page.evaluate(() => {
+  function getFilteredComputedStyles(element) {
+    const computed = window.getComputedStyle(element);
+    const defaultElement = document.createElement(element.tagName);
+    document.body.appendChild(defaultElement);
+    const defaultStyles = window.getComputedStyle(defaultElement);
+
+    const filteredStyles = {};
+
+    for (let i = 0; i < computed.length; i++) {
+        const prop = computed[i];
+        const computedValue = computed.getPropertyValue(prop);
+        const defaultValue = defaultStyles.getPropertyValue(prop);
+
+        if (computedValue !== defaultValue) {
+            filteredStyles[prop] = computedValue;
+        }
+    }
+
+    document.body.removeChild(defaultElement);
+    return filteredStyles;
+}
+
+function cssStyleDeclarationToString(styles) {
+    return Object.entries(styles)
+        .map(([prop, value]) => `${prop}: ${value};`)
+        .join(' ');
+}
+
+function inlineImportantStyles(root) {
+    const treeWalker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+
+    while (treeWalker.nextNode()) {
+        const element = treeWalker.currentNode;
+        const filteredStyles = getFilteredComputedStyles(element);
+        const inheritedStyles = getInheritedStyles(element);
+
+        // Usuwamy style, które są takie same jak u rodzica
+        for (const prop in inheritedStyles) {
+            if (filteredStyles[prop] === inheritedStyles[prop]) {
+                delete filteredStyles[prop];
+            }
+        }
+
+        const inlineStyle = cssStyleDeclarationToString(filteredStyles);
+        if (inlineStyle) {
+            element.setAttribute('style', inlineStyle);
+        }
+
+        // Usuwanie klas
+        element.removeAttribute('class');
+    }
+}
+
+function getInheritedStyles(element) {
+    const inheritedStyles = {};
+    let parent = element.parentElement;
+
+    while (parent) {
+        const parentStyles = window.getComputedStyle(parent);
+        for (let i = 0; i < parentStyles.length; i++) {
+            const prop = parentStyles[i];
+            if (!inheritedStyles[prop]) {
+                inheritedStyles[prop] = parentStyles.getPropertyValue(prop);
+            }
+        }
+        parent = parent.parentElement;
+    }
+
+    return inheritedStyles;
+}
+
+
+  const clonedDoc = document.documentElement.cloneNode(true);
+  inlineImportantStyles(clonedDoc);
+  return `<!DOCTYPE html>\n${clonedDoc.outerHTML}`;
+});
+
+// Zapisz do pliku
+await fs.writeFile('output.html', inlineHtml);
+
+console.log('Zapisano HTML z inline CSS jako output.html');
+
+await browser.close();

package/render-experiment3.js

@@ -0,0 +1,213 @@
+import { chromium } from 'playwright'
+import fs from 'fs/promises'
+
+const url = process.argv[2]
+
+const browser = await chromium.launch()
+const page = await browser.newPage()
+
+// Załaduj stronę
+await page.goto(url) // Podmień na swoją stronę
+
+const inlineHtml = await page.evaluate(() => {
+  const ALLOWED_CSS_PROPERTIES = new Set([
+    'background',
+    'background-blend-mode',
+    'background-clip',
+    'background-color',
+    'background-image',
+    'background-origin',
+    'background-position',
+    'background-repeat',
+    'background-size',
+    'border',
+    'border-bottom',
+    'border-bottom-color',
+    'border-bottom-left-radius',
+    'border-bottom-right-radius',
+    'border-bottom-style',
+    'border-bottom-width',
+    'border-collapse',
+    'border-color',
+    'border-left',
+    'border-left-color',
+    'border-left-style',
+    'border-left-width',
+    'border-radius',
+    'border-right',
+    'border-right-color',
+    'border-right-style',
+    'border-right-width',
+    'border-spacing',
+    'border-style',
+    'border-top',
+    'border-top-color',
+    'border-top-left-radius',
+    'border-top-right-radius',
+    'border-top-style',
+    'border-top-width',
+    'border-width',
+    'box-sizing',
+    'color',
+    'display',
+    'float',
+    'font',
+    'font-family',
+    'font-feature-settings',
+    'font-size',
+    'font-size-adjust',
+    'font-stretch',
+    'font-style',
+    'font-weight',
+    'height',
+    'letter-spacing',
+    'line-height',
+    'list-style',
+    'list-style-position',
+    'list-style-type',
+    'margin',
+    'margin-bottom',
+    'margin-left',
+    'margin-right',
+    'margin-top',
+    'max-height',
+    'max-width',
+    'min-height',
+    'min-width',
+    'opacity',
+    'outline',
+    'outline-color',
+    'outline-style',
+    'outline-width',
+    'overflow',
+    'overflow-x',
+    'overflow-y',
+    'padding',
+    'padding-bottom',
+    'padding-left',
+    'padding-right',
+    'padding-top',
+    'table-layout',
+    'text-align',
+    'text-decoration',
+    'text-decoration-color',
+    'text-decoration-line',
+    'text-decoration-style',
+    'text-indent',
+    'text-overflow',
+    'text-transform',
+    'vertical-align',
+    'white-space',
+    'width',
+    'word-break',
+    'word-spacing',
+    'word-wrap'
+  ])
+
+  function getCSSDefinedStylesWithLayers(element) {
+    const computedStyles = window.getComputedStyle(element)
+    const styles = {}
+    const layerRules = []
+
+    for (const sheet of document.styleSheets) {
+      try {
+        for (const rule of sheet.cssRules) {
+          if (rule instanceof CSSLayerBlockRule) {
+            // Przechodzi przez zdefiniowane warstwy
+            for (const subRule of rule.cssRules) {
+              if (subRule instanceof CSSStyleRule && element.matches(subRule.selectorText)) {
+                layerRules.push(subRule)
+              }
+            }
+          } else if (rule instanceof CSSStyleRule && element.matches(rule.selectorText)) {
+            layerRules.push(rule)
+          }
+        }
+      } catch (e) {
+        console.warn('Nie można odczytać stylów z:', sheet.href)
+      }
+    }
+
+    // Zastosowanie reguł w kolejności ich priorytetu
+    for (const rule of layerRules) {
+      for (const prop of rule.style) {
+        styles[prop] = computedStyles.getPropertyValue(prop)
+      }
+    }
+
+    return styles
+  }
+
+  function getFilteredComputedStyles(element) {
+    const definedStyles = getCSSDefinedStylesWithLayers(element)
+    const filteredStyles = {}
+
+    for (const prop in definedStyles) {
+      if (ALLOWED_CSS_PROPERTIES.has(prop)) {
+        filteredStyles[prop] = definedStyles[prop]
+      }
+    }
+
+    return filteredStyles
+  }
+
+  function cssStyleDeclarationToString(styles) {
+    return Object.entries(styles)
+      .map(([prop, value]) => `${prop}: ${value};`)
+      .join(' ')
+  }
+
+  function inlineImportantStyles(root) {
+    const treeWalker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT)
+
+    while (treeWalker.nextNode()) {
+      const element = treeWalker.currentNode
+      const filteredStyles = getFilteredComputedStyles(element)
+      const inheritedStyles = getInheritedStyles(element)
+
+      // Usuwamy style, które są takie same jak u rodzica
+      for (const prop in inheritedStyles) {
+        if (filteredStyles[prop] === inheritedStyles[prop]) {
+          delete filteredStyles[prop]
+        }
+      }
+
+      const inlineStyle = cssStyleDeclarationToString(filteredStyles)
+      if (inlineStyle) {
+        element.setAttribute('style', inlineStyle)
+      }
+
+      // Usuwanie klas
+      element.removeAttribute('class')
+    }
+  }
+
+  function getInheritedStyles(element) {
+    const inheritedStyles = {}
+    let parent = element.parentElement
+
+    while (parent) {
+      const parentStyles = window.getComputedStyle(parent)
+      for (let i = 0; i < parentStyles.length; i++) {
+        const prop = parentStyles[i]
+        if (!inheritedStyles[prop]) {
+          inheritedStyles[prop] = parentStyles.getPropertyValue(prop)
+        }
+      }
+      parent = parent.parentElement
+    }
+
+    return inheritedStyles
+  }
+  const htmlElement = document.querySelector('[data-html]')
+  // Uruchomienie dla całego dokumentu
+  inlineImportantStyles(htmlElement)
+  return `<!DOCTYPE html>\n${htmlElement.outerHTML}`
+})
+
+// Zapisz do pliku
+await fs.writeFile('output.html', inlineHtml)
+
+console.log('Zapisano HTML z inline CSS jako output.html')
+
+await browser.close()

package/render.js

@@ -11,6 +11,8 @@ import { ObservableValue } from '@live-change/dao'
 import definition from './definition.js'
 const config = definition.config
 
+import { runWithBrowser } from './browser.js'
+
 const publicDir = config.publicDir || 'front/public/'
 
 const authenticationKey = new ObservableValue(
@@ -40,6 +42,7 @@ definition.authenticator({
     }
   }
 })
+
 function processElement(element, images) {
   for(let i = 0; i < element.attributes.length; i++) {
     const attribute = element.attributes[i]
@@ -73,14 +76,7 @@ function processElement(element, images) {
   }
 }
 
-async function renderEmail(data) {
-  const baseUrl = `http://${config.ssrHost||process.env.SSR_HOST||'127.0.0.1'}`+
-  `:${config.ssrPort||process.env.SSR_PORT||'8001'}`
-
-  const encodedData = encodeURIComponent(JSON.stringify(data))
-  const url = `${baseUrl}/_email/${data.action}/${data.contact}/${encodedData}`
-    +`?sessionKey=${await authenticationKey.getValue()}`
-  console.log("RENDER EMAIL", data, "URL", url)
+async function renderEmailWithJuice(url) {
   const response = await got(url)
   let body = response.body
   console.log("BASE URL", baseUrl)
@@ -131,14 +127,38 @@ async function renderEmail(data) {
     }
   }
   console.log("IMAGES", Array.from(images.entries()))
-  const imageAttachments = Array.from(images.entries()).map(([imagePath, contentId]) => {
+  const imageAttachments = await processImageAttachments(images, url)
+
+  email.attachments = email.attachments || []
+  email.attachments.push(...imageAttachments)
+
+  console.log("EMAIL", email)
+
+  return email
+}
+
+import fs from 'fs/promises'
+
+async function processImageAttachments(images, url) {
+  return Promise.all(Array.from(images.entries()).map(async ([imagePath, contentId]) => {
+    if (imagePath.startsWith('http')) {
+      console.log("EXTERNAL IMAGE", imagePath)
+      return {
+        path: imagePath,
+        cid: contentId,
+        filename
+      }
+    }
     const imageUrl = new URL(imagePath, url)
     const file = path.resolve(publicDir, imageUrl.pathname.slice(1))
     const filename = path.basename(file)
-    if(imagePath.startsWith('http')) {
-      console.log("EXTERNAL IMAGE", imagePath)
+    console.log("LOCAL IMAGE", filename)
+    // check if file exists
+    if(fs.access(file).catch(() => false)) {
+      console.log("LOCAL IMAGE DOES NOT EXIST", file) // paths must be wrong, return external image
+      const imageUrl = new URL(imagePath, url)
       return {
-        path: imagePath,
+        path: imageUrl.toString(),
         cid: contentId,
         filename
       }
@@ -148,14 +168,273 @@ async function renderEmail(data) {
       path: file,
       cid: contentId
     }
+  }))
+}
+
+async function renderEmailWithBrowser(url) {
+  
+  return await runWithBrowser(async (browser) => {
+    const page = await browser.newPage()
+    console.log("RENDER EMAIL WITH BROWSER", url)
+    await page.goto(url)
+
+    const email = await page.evaluate(() => {
+      const ALLOWED_CSS_PROPERTIES = new Set([
+        'background',
+        'background-blend-mode',
+        'background-clip',
+        'background-color',
+        'background-image',
+        'background-origin',
+        'background-position',
+        'background-repeat',
+        'background-size',
+        'border',
+        'border-bottom',
+        'border-bottom-color',
+        'border-bottom-left-radius',
+        'border-bottom-right-radius',
+        'border-bottom-style',
+        'border-bottom-width',
+        'border-collapse',
+        'border-color',
+        'border-left',
+        'border-left-color',
+        'border-left-style',
+        'border-left-width',
+        'border-radius',
+        'border-right',
+        'border-right-color',
+        'border-right-style',
+        'border-right-width',
+        'border-spacing',
+        'border-style',
+        'border-top',
+        'border-top-color',
+        'border-top-left-radius',
+        'border-top-right-radius',
+        'border-top-style',
+        'border-top-width',
+        'border-width',
+        'box-sizing',
+        'color',
+        'display',
+        'float',
+        'font',
+        'font-family',
+        'font-feature-settings',
+        'font-size',
+        'font-size-adjust',
+        'font-stretch',
+        'font-style',
+        'font-weight',
+        'height',
+        'letter-spacing',
+        'line-height',
+        'list-style',
+        'list-style-position',
+        'list-style-type',
+        'margin',
+        'margin-bottom',
+        'margin-left',
+        'margin-right',
+        'margin-top',
+        'max-height',
+        'max-width',
+        'min-height',
+        'min-width',
+        'opacity',
+        'outline',
+        'outline-color',
+        'outline-style',
+        'outline-width',
+        'overflow',
+        'overflow-x',
+        'overflow-y',
+        'padding',
+        'padding-bottom',
+        'padding-left',
+        'padding-right',
+        'padding-top',
+        'table-layout',
+        'text-align',
+        'text-decoration',
+        'text-decoration-color',
+        'text-decoration-line',
+        'text-decoration-style',
+        'text-indent',
+        'text-overflow',
+        'text-transform',
+        'vertical-align',
+        'white-space',
+        'width',
+        'word-break',
+        'word-spacing',
+        'word-wrap'
+      ])
+    
+      function getCSSDefinedStylesWithLayers(element) {
+        const computedStyles = window.getComputedStyle(element)
+        const styles = {}
+        const layerRules = []
+    
+        for (const sheet of document.styleSheets) {
+          try {
+            for (const rule of sheet.cssRules) {
+              if (rule instanceof CSSLayerBlockRule) {
+                // Przechodzi przez zdefiniowane warstwy
+                for (const subRule of rule.cssRules) {
+                  if (subRule instanceof CSSStyleRule && element.matches(subRule.selectorText)) {
+                    layerRules.push(subRule)
+                  }
+                }
+              } else if (rule instanceof CSSStyleRule && element.matches(rule.selectorText)) {
+                layerRules.push(rule)
+              }
+            }
+          } catch (e) {
+            console.warn('Nie można odczytać stylów z:', sheet.href)
+          }
+        }
+    
+        // Zastosowanie reguł w kolejności ich priorytetu
+        for (const rule of layerRules) {
+          for (const prop of rule.style) {
+            styles[prop] = computedStyles.getPropertyValue(prop)
+          }
+        }
+    
+        return styles
+      }
+    
+      function getFilteredComputedStyles(element) {
+        const definedStyles = getCSSDefinedStylesWithLayers(element)
+        const filteredStyles = {}
+    
+        for (const prop in definedStyles) {
+          if (ALLOWED_CSS_PROPERTIES.has(prop)) {
+            filteredStyles[prop] = definedStyles[prop]
+          }
+        }
+    
+        return filteredStyles
+      }
+    
+      function cssStyleDeclarationToString(styles) {
+        return Object.entries(styles)
+          .map(([prop, value]) => `${prop}: ${value};`)
+          .join(' ')
+      }
+    
+      function inlineImportantStyles(root) {
+        const treeWalker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT)
+    
+        while (treeWalker.nextNode()) {
+          const element = treeWalker.currentNode
+          const filteredStyles = getFilteredComputedStyles(element)
+          const inheritedStyles = getInheritedStyles(element)
+    
+          // Usuwamy style, które są takie same jak u rodzica
+          for (const prop in inheritedStyles) {
+            if (filteredStyles[prop] === inheritedStyles[prop]) {
+              delete filteredStyles[prop]
+            }
+          }
+    
+          const inlineStyle = cssStyleDeclarationToString(filteredStyles)
+          if (inlineStyle) {
+            element.setAttribute('style', inlineStyle)
+          }
+    
+          // Usuwanie klas
+          element.removeAttribute('class')
+        }
+      }
+    
+      function getInheritedStyles(element) {
+        const inheritedStyles = {}
+        let parent = element.parentElement
+    
+        while (parent) {
+          const parentStyles = window.getComputedStyle(parent)
+          for (let i = 0; i < parentStyles.length; i++) {
+            const prop = parentStyles[i]
+            if (!inheritedStyles[prop]) {
+              inheritedStyles[prop] = parentStyles.getPropertyValue(prop)
+            }
+          }
+          parent = parent.parentElement
+        }
+    
+        return inheritedStyles
+      }
+
+      // Get headers
+      const headersJson = document.querySelector('[data-headers]').textContent
+      const headers = JSON.parse(headersJson)
+      
+      // Process HTML and text versions
+      const messageElements = document.querySelectorAll("[data-html],[data-text]")
+      const email = { ...headers }
+      
+      for(let messageElement of messageElements) {
+        const toHtml = messageElement.getAttribute('data-html')
+        const toText = messageElement.getAttribute('data-text')
+        
+        if(toHtml !== null) {
+          inlineImportantStyles(messageElement)
+          email.html = messageElement.outerHTML
+        }
+        if(toText !== null) {
+          email.text = messageElement.innerText
+          if(messageElement.tagName === 'PRE') {
+            const indentation = email.text.match(/^ */)[0]
+            const indentationRegex = new RegExp('\n' + indentation, 'g')
+            email.text = email.text.slice(indentation.length).replace(indentationRegex, '\n')
+          }
+        }
+      }
+
+      return email
+    })
+
+    // process element to remove unwanted attributes and extract images using jsdom
+    const dom = new JSDOM(email.html)
+    const images = new Map()
+    const messageElements = dom.window.document.querySelectorAll("[data-html]")
+    for(let messageElement of messageElements) {
+      processElement(messageElement, images)
+    }
+    email.html = dom.serialize()
+    dom.window.close()
+
+    console.log("IMAGES", Array.from(images.entries()))
+    const imageAttachments = await processImageAttachments(images, url)
+  
+    email.attachments = email.attachments || []
+    email.attachments.push(...imageAttachments)
+  
+    console.log("EMAIL", email)
+
+    return email
   })
+}
 
-  email.attachments = email.attachments || []
-  email.attachments.push(...imageAttachments)
+export { renderEmailWithJuice, renderEmailWithBrowser }
 
-  console.log("EMAIL", email)
+async function renderEmail(data) {
+  const baseUrl = `http://${config.ssrHost||process.env.SSR_HOST||'127.0.0.1'}`+
+  `:${config.ssrPort||process.env.SSR_PORT||'8001'}`
 
-  return email
+  const encodedData = encodeURIComponent(JSON.stringify(data))
+  const url = `${baseUrl}/_email/${data.action}/${data.contact}/${encodedData}`
+    +`?sessionKey=${await authenticationKey.getValue()}`
+  console.log("RENDER EMAIL", data, "URL", url)
+  if(config.renderMethod === 'juice') {
+    return renderEmailWithJuice(url)
+  } else if(config.renderMethod === 'browser') {
+    return renderEmailWithBrowser(url)
+  }
 }
 
 export default renderEmail

package/send-experiment.js

@@ -0,0 +1,22 @@
+import fs from 'fs/promises'
+
+import "dotenv/config"
+import nodemailer from 'nodemailer'
+
+import { renderEmailWithJuice, renderEmailWithBrowser } from './render.js'
+import config from './config.js'
+
+const url = process.argv[2]
+
+const email = await renderEmailWithBrowser(url)
+
+//await fs.writeFile('email.html', email.html); process.exit(0)
+console.log("SMTP CONFIG", config.smtp)
+
+/// send email
+const smtp = nodemailer.createTransport(config.smtp)
+
+
+const result = await smtp.sendMail(email)
+
+console.log(result)

package/send.js

@@ -6,23 +6,9 @@ const app = App.app()
 
 import renderEmail from './render.js'
 
-const config = definition.config
+import config from './config.js'
 
-const smtp = nodemailer.createTransport(config.transport || {
-  host: config.host || process.env.SMTP_HOST,
-  port: +(config.port || process.env.SMTP_PORT),
-  auth: {
-    user: (config.user || process.env.SMTP_USER),
-    pass: (config.password || process.env.SMTP_PASSWORD)
-  },
-  secure: (config.secure || process.env.SMTP_SECURE) !== undefined
-      ? !!((config.secure || process.env.SMTP_SECURE))
-      : undefined, // secure:true for port 465, secure:false for port 587
-  tls: {
-    // do not fail on invalid certs
-    rejectUnauthorized: !(config.ignoreTLS || process.env.SMTP_IGNORE_TLS)
-  }
-})
+const smtp = nodemailer.createTransport(config.smtp)
 
 const SentEmail = definition.model({
   name: "SentEmail",