SandboxEdit

Now try live preview, syntax highlighting, fullscreen, autocomplete and all the other delicious stuff.

Tech preview, early stage... (pull the repohead if you like.)

code here

Night shift Edit

Show Files (2 files)

Comments

Console Logger

Because your users deploy directly to the browser (no bundler), process.env does not exist. In a browser, process is undefined, so your current isProduction() always falls into the catch and returns false—meaning logging is always on in production.

The best practice for a client-side library like WikiEdit is to let the host application (WackoWiki/PHP) tell you the mode via a config object, with safe fallbacks for standalone use.

Recommended Architecture

Primary: Read from a global config set by the host PHP app (window.WikiEditConfig.debug).
Secondary: Allow a URL flag (?we_debug=1) for temporary troubleshooting.
Fallback: Auto-enable on localhost for developer convenience.
Default: false (OFF)—safe for production out of the box.

1. Host Application Integration (WackoWiki PHP)

In WackoWiki’s template or header where scripts are loaded, have PHP emit the configuration before loading WikiEdit:

HTML

<!-- In your WackoWiki PHP template / action -->
<script>
  window.WikiEditConfig = {
    // Use WackoWiki's own debug setting
    debug: <?= (!empty($this->config['debug']) || !empty($this->db->debug)) ? 'true' : 'false' ?>
  };
</script>
<!-- Then load WikiEdit -->
<script type="module" src="path/to/wikiedit.js"></script>

This is the most robust approach because the server knows the truth about the environment.

2. The Logger (`src/utils/logger.js`)

This version has no process.env dependencies and defaults to silent in production.

JAVASCRIPT

// src/utils/logger.js

/**
 * Environment detection for no-build (browser-only) deployments.
 * Priority:
 *   1. window.WikiEditConfig.debug (host app / PHP)
 *   2. URL flag: ?we_debug=1 (ad-hoc testing)
 *   3. localhost/127.0.0.1 (developer convenience)
 *   4. DEFAULT: false (safe for production)
 */
const getDebugState = () => {
  // 1. Explicit config from host application
  if (window.WikiEditConfig && typeof window.WikiEditConfig.debug === 'boolean') {
    return window.WikiEditConfig.debug;
  }

  // 2. URL override
  try {
    const params = new URLSearchParams(window.location.search);
    if (params.has('we_debug')) {
      return params.get('we_debug') !== '0';
    }
  } catch (e) { /* ignore */ }

  // 3. Localhost heuristic
  try {
    const host = window.location.hostname;
    if (host === 'localhost' || host === '127.0.0.1' || host === '::1') {
      return true;
    }
  } catch (e) { /* ignore */ }

  // 4. Safe default: logging is OFF
  return false;
};

const IS_DEBUG = getDebugState();
const PREFIX = '[WikiEdit]';
const noop = () => {};

/**
 * Build a logger method. In non-debug mode, returns a true no-op
 * (not even a function that checks a flag on every call).
 */
const makeLoggerMethod = (consoleMethod, customFn) => {
  if (!IS_DEBUG) return noop;
  if (typeof customFn === 'function') return customFn;
  return console[consoleMethod].bind(console, PREFIX);
};

const logger = {
  debug:  makeLoggerMethod('debug'),
  log:    makeLoggerMethod('log'),
  info:   makeLoggerMethod('info'),
  warn:   makeLoggerMethod('warn'),
  error:  makeLoggerMethod('error'),

  success: makeLoggerMethod('log', (...args) => {
    console.log('%c✓', 'color:#28a745;font-weight:bold', ...args);
  }),

  // Utility so other code can check mode at runtime
  isDebug: () => IS_DEBUG,
};

// Also expose on window for non-module / legacy usage
if (typeof window !== 'undefined') {
  window.WikiEdit = window.WikiEdit || {};
  window.WikiEdit.logger = logger;
}

export default logger;

3. For End Users (Standalone / No PHP Access)

If a user deploys WikiEdit standalone and cannot edit WackoWiki’s PHP, they can set the config manually in their HTML before the script runs:

HTML

<script>
  window.WikiEditConfig = {
    debug: false  // Or true for troubleshooting
  };
</script>
<script type="module" src="path/to/wikiedit.js"></script>

Or they can temporarily force debug logging on a live site with a URL parameter:

https://wiki.example.com/?we_debug=1

Important Notes

Concern	Recommendation
`warn` / `error` in prod	The code above suppresses all logging in production. This keeps the console clean and prevents leaking internal state. However, if you want to keep `warn` and `error` visible in production (common for tracking bugs), change those lines to `makeLoggerMethod('warn')` etc., and only suppress `debug`, `log`, `info`, and `success`.
Performance	Because `IS_DEBUG` is evaluated once at module load, the minified production code becomes `const x=()=>{}; logger={debug:x, log:x...}` and tree-shaking / minification is more effective than checking a flag on every log call.
Security	Never log sensitive data (tokens, PII). Relying on a client-side "is production" check is a UX/cleanliness measure, not a security boundary—a user can always open DevTools.

Summary

Best practice: WackoWiki PHP sets window.WikiEditConfig.debug.
Zero-config safety: If the config is missing, the logger defaults to OFF unless on localhost.
Override: Use ?we_debug=1 in the URL when debugging a production page.

Night shiftEdit