Reorders the code examples. We already show off the realtime at the top - next we should show of the graph-like fetching

libraries/supabase-js/lib/Supabase.js

@@ -0,0 +1,7 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:!0});var _createClass=function(){function a(a,b){for(var c,d=0;d<b.length;d++)c=b[d],c.enumerable=c.enumerable||!1,c.configurable=!0,'value'in c&&(c.writable=!0),Object.defineProperty(a,c.key,c)}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),_realtimeJs=require('@supabase/realtime-js'),_postgrestJs=require('@supabase/postgrest-js'),_ChangeMapper=require('./utils/ChangeMapper'),ChangeMapper=_interopRequireWildcard(_ChangeMapper);function _interopRequireWildcard(a){if(a&&a.__esModule)return a;var b={};if(null!=a)for(var c in a)Object.prototype.hasOwnProperty.call(a,c)&&(b[c]=a[c]);return b.default=a,b}function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError('Cannot call a class as a function')}var Supabase=function(){function a(b,c,d,e,f,g){_classCallCheck(this,a),this.tableName=b,this.restUrl=c,this.realtimeUrl=d,this.schema=e,this.uuid=g,this.apikey=f,this.socket=null,this.channel=null,this.listeners={},this.queryFilters=[]}/**
+   * REALTIME FUNCTIONALITY
+   */return _createClass(a,[{key:'createListener',value:function e(){var a=this,b=''+this.realtimeUrl,c='';this.queryFilters.forEach(function(a){switch(a.filter){case'filter':'eq'===a.operator&&(c=':'+a.columnName+'='+a.operator+'.'+a.criteria);break;default:}});var d='*'==this.tableName?'realtime:*':'realtime:'+this.schema+':'+this.tableName+c;this.socket=new _realtimeJs.Socket(b,{params:{apikey:this.apikey}}),this.channel=this.socket.channel(d),this.socket.onOpen(function(){console.debug(a.realtimeUrl+': REALTIME CONNECTED')}),this.socket.onClose(function(){console.debug(a.realtimeUrl+': REALTIME DISCONNECTED')})}},{key:'on',value:function c(a,b){return null==this.socket&&this.createListener(),this.channel.on(a,function(a){var c={schema:a.schema,table:a.table,commit_timestamp:a.commit_timestamp},d={},e={},f={};switch(a.type){case'INSERT':d=ChangeMapper.convertChangeData(a.columns,a.record),c.eventType='INSERT',c.new=d;break;case'UPDATE':e=ChangeMapper.convertChangeData(a.columns,a.old_record),d=ChangeMapper.convertChangeData(a.columns,a.record),Object.keys(e).forEach(function(a){null!=e[a]&&(f[a]=e[a])}),c.eventType='UPDATE',c.old=f,c.new=d;break;case'DELETE':e=ChangeMapper.convertChangeData(a.columns,a.old_record),Object.keys(e).forEach(function(a){null!=e[a]&&(f[a]=e[a])}),c.eventType='DELETE',c.old=f;break;default:}b(c)}),this.listeners[a]=b,this}},{key:'subscribe',value:function b(){var a=this;return null==this.socket&&this.createListener(),this.socket.connect(),'joined'!==this.channel.state&&this.channel.join().receive('ok',function(b){return console.debug(a.realtimeUrl+': Joined Realtime successfully ',b)}).receive('error',function(b){return console.debug(a.realtimeUrl+': Unable to join ',b)}).receive('timeout',function(){return console.debug(a.realtimeUrl+': Network timeout. Still waiting...')}),this}},{key:'unsubscribe',value:function a(){return this.socket&&this.socket.disconnect(),this}/**
+   * REST FUNCTIONALITIES
+   */},{key:'initClient',value:function c(){var a=new _postgrestJs.PostgrestClient(this.restUrl,{headers:{apikey:this.apikey}}),b=a.from(this.tableName);// go through queryFilters
+return this.queryFilters.forEach(function(a){switch(a.filter){case'filter':b.filter(a.columnName,a.operator,a.criteria);break;case'match':b.match(a.query);break;case'order':b.order(a.property,a.ascending,a.nullsFirst);break;case'range':b.range(a.from,a.to);break;case'single':b.single();break;default:}}),b}},{key:'select',value:function d(){var a=0<arguments.length&&void 0!==arguments[0]?arguments[0]:'*',b=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},c=this.initClient();return c.select(a,b)}},{key:'insert',value:function d(a){var b=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},c=this.initClient();return c.insert(a,b)}},{key:'update',value:function d(a){var b=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},c=this.initClient();return c.update(a,b)}},{key:'delete',value:function c(){var a=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{},b=this.initClient();return b.delete(a)}},{key:'filter',value:function d(a,b,c){return this.queryFilters.push({filter:'filter',columnName:a,operator:b,criteria:c}),this}},{key:'match',value:function b(a){return this.queryFilters.push({filter:'match',query:a}),this}},{key:'order',value:function d(a){var b=!!(1<arguments.length&&void 0!==arguments[1])&&arguments[1],c=!!(2<arguments.length&&void 0!==arguments[2])&&arguments[2];return this.queryFilters.push({filter:'order',property:a,ascending:b,nullsFirst:c}),this}},{key:'range',value:function c(a,b){return this.queryFilters.push({filter:'range',from:a,to:b}),this}},{key:'single',value:function a(){return this.queryFilters.push({filter:'single'}),this}}]),a}(),advancedFilters=['eq','gt','lt','gte','lte','like','ilike','is','in','not'];// pre-empts if any of the filters are used before select
+advancedFilters.forEach(function(a){return Supabase.prototype[a]=function(b,c){return this.filter(b,a,c)}}),exports.default=Supabase,module.exports=exports.default;

libraries/supabase-js/lib/index.js

@@ -0,0 +1 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:!0}),exports.createClient=void 0;var _createClass=function(){function a(a,b){for(var c,d=0;d<b.length;d++)c=b[d],c.enumerable=c.enumerable||!1,c.configurable=!0,'value'in c&&(c.writable=!0),Object.defineProperty(a,c.key,c)}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),_Helpers=require('./utils/Helpers'),_Supabase=require('./Supabase'),_Supabase2=_interopRequireDefault(_Supabase),_postgrestJs=require('@supabase/postgrest-js');function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError('Cannot call a class as a function')}var SupabaseClient=function(){function a(b,c){2<arguments.length&&void 0!==arguments[2]?arguments[2]:{};_classCallCheck(this,a),this.supabaseUrl=null,this.supabaseKey=null,this.restUrl=null,this.realtimeUrl=null,this.defaultSchema='public',this.subscriptions={},this.authenticate(b,c)}return _createClass(a,[{key:'authenticate',value:function c(a,b){this.supabaseUrl=a,this.supabaseKey=b,this.restUrl=a+'/rest/v1',this.realtimeUrl=(a+'/realtime/v1').replace('http','ws')}},{key:'from',value:function c(a){var b=(0,_Helpers.uuid)();return this.subscriptions[b]=new _Supabase2.default(a,this.restUrl,this.realtimeUrl,this.defaultSchema,this.supabaseKey,b),this.subscriptions[b]}},{key:'rpc',value:function d(a){var b=1<arguments.length&&void 0!==arguments[1]?arguments[1]:null,c=new _postgrestJs.PostgrestClient(this.restUrl,{headers:{apikey:this.supabaseKey}});return c.rpc(a,b)}},{key:'getSubscriptions',value:function a(){return Object.values(this.subscriptions)}},{key:'removeSubscription',value:function b(a){a.unsubscribe(),delete this.subscriptions[a.uuid]}}]),a}(),createClient=function(a,b){var c=2<arguments.length&&arguments[2]!==void 0?arguments[2]:{};return new SupabaseClient(a,b,c)};exports.createClient=createClient;

libraries/supabase-js/lib/utils/ChangeMapper.js

@@ -0,0 +1,51 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:!0});var _slicedToArray=function(){function a(a,b){var c=[],d=!0,e=!1,f=void 0;try{for(var g,h=a[Symbol.iterator]();!(d=(g=h.next()).done)&&(c.push(g.value),!(b&&c.length===b));d=!0);}catch(a){e=!0,f=a}finally{try{!d&&h['return']&&h['return']()}finally{if(e)throw f}}return c}return function(b,c){if(Array.isArray(b))return b;if(Symbol.iterator in Object(b))return a(b,c);throw new TypeError('Invalid attempt to destructure non-iterable instance')}}(),convertChangeData=exports.convertChangeData=function(a,b){var c=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{},d={},e='undefined'==typeof c.skipTypes?[]:c.skipTypes;return Object.entries(b).map(function(c){var f=_slicedToArray(c,2),g=f[0],h=f[1];d[g]=convertColumn(g,a,b,e)}),d},convertColumn=exports.convertColumn=function(a,b,c,d){var e=b.find(function(b){return b.name==a});return d.includes(e.type)?noop(c[a]):convertCell(e.type,c[a])},convertCell=exports.convertCell=function(a,b){try{if(null===b)return null;// if data type is an array
+if('_'===a.charAt(0)){var c=a.slice(1,a.length);return toArray(b,c)}// If not null, convert to correct type.
+return'abstime'===a?noop(b):'bool'===a?toBoolean(b):'date'===a?noop(b):'daterange'===a?toDateRange(b):'float4'===a?toFloat(b):'float8'===a?toFloat(b):'int2'===a?toInt(b):'int4'===a?toInt(b):'int4range'===a?toIntRange(b):'int8'===a?toInt(b):'int8range'===a?toIntRange(b):'json'===a?toJson(b):'jsonb'===a?toJson(b):'money'===a?toFloat(b):'numeric'===a?toFloat(b):'oid'===a?toInt(b):'reltime'===a?noop(b):'time'===a?noop(b):'timestamp'===a?toTimestampString(b):'timestamptz'===a?noop(b):'timetz'===a?noop(b):'tsrange'===a?toDateRange(b):'tstzrange'===a?toDateRange(b):noop(b)}catch(c){return console.log('Could not convert cell of type '+a+' and value '+b),console.log('This is the error: '+c),b}},noop=exports.noop=function(a){return a},toBoolean=exports.toBoolean=function(a){return!('t'!==a)||void 0},toDate=exports.toDate=function(a){return new Date(a)},toDateRange=exports.toDateRange=function(a){var b=JSON.parse(a);return[new Date(b[0]),new Date(b[1])]},toFloat=exports.toFloat=function(a){return parseFloat(a)},toInt=exports.toInt=function(a){return parseInt(a)},toIntRange=exports.toIntRange=function(a){var b=JSON.parse(a);return[parseInt(b[0]),parseInt(b[1])]},toJson=exports.toJson=function(a){return JSON.parse(a)},toArray=exports.toArray=function(a,b){// this takes off the '{' & '}'
+var c=a.slice(1,a.length-1),d=c.split(','),e=d.map(function(a){return convertCell(b,a)});// converts the string into an array
+return e},toTimestampString=exports.toTimestampString=function(a){return a.replace(' ','T')};// # Lifted from epgsql (src/epgsql_binary.erl), this module licensed under
+// # 3-clause BSD found here: https://raw.githubusercontent.com/epgsql/epgsql/devel/LICENSE
+/**
+ * Takes an array of columns and an object of string values then converts each string value
+ * to its mapped type
+ * @param {{name: String, type: String}[]} columns
+ * @param {Object} records
+ * @param {Object} options The map of various options that can be applied to the mapper
+ * @param {Array} options.skipTypes The array of types that should not be converted
+ *
+ * @example convertChangeData([{name: 'first_name', type: 'text'}, {name: 'age', type: 'int4'}], {first_name: 'Paul', age:'33'}, {})
+ * //=>{ first_name: 'Paul', age: 33 }
+ *//**
+ * Converts the value of an individual column
+ * @param {String} columnName The column that you want to convert
+ * @param {{name: String, type: String}[]} columns All of the columns
+ * @param {Object} records The map of string values
+ * @param {Array} skipTypes An array of types that should not be converted
+ * @return {object} Useless information
+ *
+ * @example convertColumn('age', [{name: 'first_name', type: 'text'}, {name: 'age', type: 'int4'}], ['Paul', '33'], [])
+ * //=> 33
+ * @example convertColumn('age', [{name: 'first_name', type: 'text'}, {name: 'age', type: 'int4'}], ['Paul', '33'], ['int4'])
+ * //=> "33"
+ *//**
+ * If the value of the cell is `null`, returns null.
+ * Otherwise converts the string value to the correct type.
+ * @param {String} type A postgres column type
+ * @param {String} stringValue The cell value
+ *
+ * @example convertCell('bool', 'true')
+ * //=> true
+ * @example convertCell('int8', '10')
+ * //=> 10
+ * @example convertCell('_int4', '{1,2,3,4}')
+ * //=> [1,2,3,4]
+ *//**
+ * Converts a Postgres Array into a native JS array
+ * @example toArray('{1,2,3,4}', 'int4')
+ * //=> [1,2,3,4]
+ *//**
+ * Fixes timestamp to be ISO-8601. Swaps the space between the date and time for a 'T'
+ * See https://github.com/supabase/supabase/issues/18
+ * @returns {string}
+ * @example toTimestampString('2019-09-10 00:00:00')
+ * //=> '2019-09-10T00:00:00'
+ */

libraries/supabase-js/lib/utils/Helpers.js

@@ -0,0 +1 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:!0}),exports.uuid=uuid;function uuid(){function a(){return Math.floor(65536*(1+Math.random())).toString(16).substring(1)}return a()+a()+'-'+a()+'-'+a()+'-'+a()+'-'+a()+a()+a()}

web/src/pages/index.js

@@ -19,8 +19,10 @@ const realtime = supabase
 const subscribeExample = `
 import { createClient } from '@supabase/supabase-js'
 
-// Connect to the chat room 
-const supabase = createClient('https://chat-room.supabase.co', '1a2b-3c4d-5e6f-7g8h')
+// Initialize 
+const supabaseUrl = 'https://chat-room.supabase.co'
+const supabaseKey = '1a2b-3c4d-5e6f-7g8h'
+const supabase = createClient(supabaseUrl, supabaseKey)
 
 // Get notified of all new chat messages
 const realtime = supabase
@@ -33,8 +35,10 @@ const realtime = supabase
 const readExample = `
 import { createClient } from '@supabase/supabase-js'
 
-// Connect to the chat room 
-const supabase = createClient('https://chat-room.supabase.co', '1a2b-3c4d-5e6f-7g8h')
+// Initialize 
+const supabaseUrl = 'https://chat-room.supabase.co'
+const supabaseKey = '1a2b-3c4d-5e6f-7g8h'
+const supabase = createClient(supabaseUrl, supabaseKey)
 
 // Get public rooms and their messages
 const publicRooms = await supabase
@@ -48,8 +52,10 @@ const publicRooms = await supabase
 const createExample = `
 import { createClient } from '@supabase/supabase-js'
 
-// Connect to the chat room 
-const supabase = createClient('https://chat-room.supabase.co', '1a2b-3c4d-5e6f-7g8h')
+// Initialize 
+const supabaseUrl = 'https://chat-room.supabase.co'
+const supabaseKey = '1a2b-3c4d-5e6f-7g8h'
+const supabase = createClient(supabaseUrl, supabaseKey)
 
 // Create a new chat room
 const newRoom = await supabase
@@ -59,8 +65,10 @@ const newRoom = await supabase
 const updateExample = `
 import { createClient } from '@supabase/supabase-js'
 
-// Connect to the chat room 
-const supabase = createClient('https://chat-room.supabase.co', '1a2b-3c4d-5e6f-7g8h')
+// Initialize 
+const supabaseUrl = 'https://chat-room.supabase.co'
+const supabaseKey = '1a2b-3c4d-5e6f-7g8h'
+const supabase = createClient(supabaseUrl, supabaseKey)
 
 // Update multiple users
 const updatedUsers = await supabase
@@ -130,7 +138,7 @@ function Feature({ imageUrl, title, description, href }) {
 function Home() {
   const context = useDocusaurusContext()
   const { siteConfig = {} } = context
-  const [visibleCodeExample, showCodeExample] = useState('SUBSCRIBE')
+  const [visibleCodeExample, showCodeExample] = useState('READ')
   return (
     <Layout title={`${siteConfig.title}`} description={siteConfig.tagline}>
       <main className="HomePage">
@@ -179,9 +187,21 @@ function Home() {
           }}
           className="hero is--dark"
         >
-          <div className="container " style={{display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+          <div
+            className="container "
+            style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}
+          >
             <img src="/img/yc-gray.png" alt="Y Combinator" width="50" />
-            <p style={{fontWeight: 'bold', padding: '0px 20px', margin: 0, display: 'inline-block' }}>Backed by Y Combinator.</p>
+            <p
+              style={{
+                fontWeight: 'bold',
+                padding: '0px 20px',
+                margin: 0,
+                display: 'inline-block',
+              }}
+            >
+              Backed by Y Combinator.
+            </p>
           </div>
         </section>
 
@@ -278,14 +298,6 @@ function Home() {
               <div className="row">
                 <div className="ButtonTabs col col--3">
                   <div>
-                    <button
-                      className={`button button--${
-                        visibleCodeExample === 'SUBSCRIBE' ? 'info is-active' : 'info'
-                      }`}
-                      onClick={() => showCodeExample('SUBSCRIBE')}
-                    >
-                      Realtime subscriptions
-                    </button>
                     <button
                       className={`button button--${
                         visibleCodeExample === 'READ' ? 'info is-active' : 'info '
@@ -294,6 +306,14 @@ function Home() {
                     >
                       Get your data
                     </button>
+                    <button
+                      className={`button button--${
+                        visibleCodeExample === 'SUBSCRIBE' ? 'info is-active' : 'info'
+                      }`}
+                      onClick={() => showCodeExample('SUBSCRIBE')}
+                    >
+                      Realtime subscriptions
+                    </button>
                     <button
                       className={`button button--${
                         visibleCodeExample === 'CREATE' ? 'info is-active' : 'info '
@@ -313,18 +333,18 @@ function Home() {
                   </div>
                 </div>
                 <div className="col col--9 code-with-header">
-                  {visibleCodeExample === 'SUBSCRIBE' && (
-                    <CustomCodeBlock
-                      header="Receive realtime messages in an example chat room"
-                      js={subscribeExample}
-                    />
-                  )}
                   {visibleCodeExample === 'READ' && (
                     <CustomCodeBlock
                       header="Get all public rooms and their messages"
                       js={readExample}
                     />
                   )}
+                  {visibleCodeExample === 'SUBSCRIBE' && (
+                    <CustomCodeBlock
+                      header="Receive realtime messages in an example chat room"
+                      js={subscribeExample}
+                    />
+                  )}
                   {visibleCodeExample === 'CREATE' && (
                     <CustomCodeBlock header="Create a new chat room" js={createExample} />
                   )}