piouc/w2-theme-cli

Getting started

Installation

npm i -D w2-theme-cli

Configuration

Put w2.config.json to project root.

{
  "basicAuthUsername": "BASIC_AUTH_USERNAME",
  "basicAuthPassword": "BASIC_AUTH_PASSWORD",
  "username": "USERNAME",
  "password": "PASSWORD",
  "baseUrl": "https://HOSTNAME/",
  "themeId": "THEME_ID"
}

Commands

Sync

npx w2-theme-cli sync

Options

• -w, --watch
  watch files

Pull

npx w2-theme-cli pull [theme id]

Preview

npx w2-theme-cli preview [theme id]

Auto reload script

Code

For theme

{% if theme_preview_mode %}
  <script>
    const connectWSServer = () => {
      const ws = new WebSocket('ws://localhost:8080')
      ws.addEventListener('message', message => {
        const data = JSON.parse(message.data)
        if(data.type === 'update'){
          location.reload()
        }
      })
    }

    let localHosted = null
    new MutationObserver((mutations) => {
      for(const mutation of mutations){
        for(const node of mutation.addedNodes){
          if(node.nodeName !== 'SCRIPT') break
          if(node.src.includes('/ec_force/assets/')){
            if(localHosted === null){
              const xhr = new XMLHttpRequest()
              xhr.open('HEAD', 'http://localhost:8088/', false)
              try {
                xhr.send()
                if(xhr.readyState === 4){
                  localHosted = true
                  connectWSServer()
                } else {
                  throw new Error()
                }
              } catch(err) {
                localHosted = false
              }
            }
            if(localHosted){
              node.src = node.src.replace(/.*\/ec_force\/assets\//, 'http://localhost:8088/')
            }
          }
          return
        }
      }
    }).observe(document, {childList: true, subtree: true})
    document.addEventListener('DOMContentLoaded', () => {
      document.querySelectorAll('link').forEach(link => {
        if(localHosted === true && link.rel === 'stylesheet' && link.href.includes('/ec_force/assets/')){
          if(localHosted){
            link.href = link.href.replace(/.*\/ec_force\/assets\//, 'http://localhost:8088/')
          }
        }
      })
    })
  </script>
{% endif %}

For LP

{%%}
<script>
  const connectWSServer = () => {
    const ws = new WebSocket('ws://localhost:8080')
    ws.addEventListener('message', message => {
      const data = JSON.parse(message.data)
      if(data.type === 'update'){
        location.reload()
      }
    })
  }
</script>