JSFiddle - React, Tailwind, and code Playground

by nocircleno

HTML

<h1>Object.defineProperty()</h1>
(open the dev tools -> console)

CSS

body {
    color: #ccc;
}

h1 {
    margin: 0;
    padding: 0;
}

JavaScript

// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
(function(window) {

   window.TSC = window.TSC || {};
   window.TSC.playerConfiguration = (function () {

       "use strict"
       
      var _xmpSrc,
          _version = "1.0";

      var checkForValidXmpFileName = function(fileName) {
         var fileNameParts = fileName.split(".")
         return fileNameParts.pop().toLowerCase() === "xml"
      };

      var settings = Object.create(Object.prototype, {
         xmpSrc: {
            enumerable: false,
            get: function() {
               return _xmpSrc;
            },
            set: function(value) {
               if(checkForValidXmpFileName(value)) {
                  _xmpSrc = value;
               } else {
                  throw "XMP must be an xml file";
               }
            }
         },
         VERSION: {
             writable: false,
             enumerable: true,
             configurable: false,
             value: _version
         }
      });
       
       Object.defineProperty(settings, "name", {
           get: function() {
               return "TechSmith Smart Player";   
           }
       });

      return settings;

   }());

}(this));

// file name must have an xml at the end
TSC.playerConfiguration.xmpSrc = "hi.xml";
console.log(TSC.playerConfiguration.xmpSrc);

// can not update value
TSC.playerConfiguration.VERSION = "2.0";
console.log(TSC.playerConfiguration.VERSION);
delete TSC.playerConfiguration.VERSION;
console.log(TSC.playerConfiguration.VERSION);

console.log(TSC.playerConfiguration.name);

// show enumerable keys
console.log(Object.keys(TSC.playerConfiguration));